Docs

[jessie l]

i want my footer a different width

http://chiselblue.com/myalliancenew/

it is okay now but in mobile it’s not.

.x-colophon .x-column.x-md:first-child {
width: 37.6%;
overflow: hidden
}
.x-colophon .x-column.x-md:nth-child(2) {
width: 16.8%;
}
.x-colophon .x-column.x-md:nth-child(3) {
width: 16.8%;
}
.x-colophon .x-column.x-md:nth-child(4) {
width: 16.8%;
}

those are the codes i get in this forum but it seems like not looking good in mobile

[Thai]

Hi There,

Please change your code to this:

@media (min-width: 980px){
	.x-colophon .x-column.x-md:first-child {
		width: 37.6%;
		overflow: hidden
	}
	.x-colophon .x-column.x-md:nth-child(2) {
		width: 16.8%;
	}
	.x-colophon .x-column.x-md:nth-child(3) {
		width: 16.8%;
	}
	.x-colophon .x-column.x-md:nth-child(4) {
		width: 16.8%;
	}
}

Hope it helps 🙂

[jessie l]

wow it works.
you know what i added this @media (max-width: 979px)

but it’s not working. can you tell me why? 🙂

[Rupok]

Hi there,

Thanks for writing back. Are you trying to add the code for mobile? It should work unless any other CSS overwriting this. Share your full code that you are using and let us know what you are trying to achieve.

Cheers!

[jessie l]

your code is working i only have question about my previous code

@media (max-width: 979px){
.x-colophon .x-column.x-md:first-child {
width: 37.6%;
overflow: hidden
}
.x-colophon .x-column.x-md:nth-child(2) {
width: 16.8%;
}
.x-colophon .x-column.x-md:nth-child(3) {
width: 16.8%;
}
.x-colophon .x-column.x-md:nth-child(4) {
width: 16.8%;
}
}

you notice in my code i used (max-width: 979) in your code (min-width: 980)

my question is is it really matter? the max and the min?
i konw this is out of my ticket question but i would like to know the difference if you don’t mind 🙂

[Friech]

Hi There,

This means to trigger the CSS code when the page is viewed on a screen width 979px and smaller.

@media (max-width: 979px) {
/*CSS CODES HERE*/
}

While this one is the opposite, it will be trigger when the page is viewed on screen width 980px and larger.

@media (min-width: 980px) {
/*CSS CODES HERE*/
}

Hope this shed some lights.

Cheers!

[jessie l]

ahhh. okay many thanks. this is the big reason why we keep purchasing x theme, very nice support. we have 15 different licenses now 🙂 more power

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[Author]

Posts