code for site width to be 100% if viewing on mobile?

dinneenp · 16-10-2014 1:42pm #1

Hi,
On my photo website I use a theme from Themeforest. The main content doesn't take up the full width of the screen. On a desktop it looks find but on mobile not ideal.

I can change the code in 'custom css' field so that a page uses 100% width.This makes it appear better in mobile but (obviously) this affects desktop too- e.g. Buy Prints page

This is the code I'm using:
.page-id-7023 .container { /* /shopping/ page */
width: 100%;
}

Can anyone tell me the code (if it doesn't take too long to figure out) so that in mobile pages will use up 100% width buy not on desktop?

Thanks in advance,
Pa.

smcelhinney · 16-10-2014 4:02pm

What you're looking for is called a media query. Be careful though, only supported for CSS3, not a problem on most smartphones as the browsers are CSS3-compliant.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.page-id-7023 .container { /* /shopping/ page */
width: 100%;
}
}

dinneenp · 16-10-2014 7:40pm

Thanks. And if I want it for all pages what would the code be please?
Page-width:100% or something like that?

daymobrew · 18-10-2014 8:52am

dinneenp wrote: »

Thanks. And if I want it for all pages what would the code be please?
Page-width:100% or something like that?

No; remove the .page-id-7023 part.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.container {
width: 100%;
}
}

dinneenp · 21-10-2014 1:07pm

daymobrew wrote: »

No; remove the .page-id-7023 part.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.container {
width: 100%;
}
}

Thanks, I almost had it, expect that I removed the .container bit as well.
Much appreciated!

dinneenp · 21-10-2014 1:12pm

Hi again,
One last question if anyone can help-

I have the following two bits of code that make content of blogs 1000 pixels wide and the inner content 700pixels.
But this applies on mobile too. Can I add to the code below so that these 'rules' won't apply on mobiles?

.blog-post, .content { width: 1000px; }
blog-post, .inner-content { width: 700px; }

Thanks in advance,
Pa.

dinneenp · 21-10-2014 4:03pm

Hi,
I managed to fix it (code below) but now my blog page isn't 100% on mobile while the other pages are. hhhhmmmm.

/* Blog wide desktop only

*/
@media only screen
and (min-device-width : 1000px){
.blog-post, .content { width: 1000px; }
}

daymobrew · 22-10-2014 10:06am

dinneenp wrote: »

Hi,
I managed to fix it (code below) but now my blog page isn't 100% on mobile while the other pages are. hhhhmmmm.

Try making that page 100% with the following:

@media only screen 
 and (max-device-width : 999px){
.blog-post, .content { width: 100%; }
}

dinneenp · 22-10-2014 2:45pm

Thanks daymobrew- appreciate it.

code for site width to be 100% if viewing on mobile?

Comments