How Can I Increase Content Width on Mobile Devices?

When viewing my site on a full-size display, the content width looks good. I used the following code [added here -> Appearance | Customize | Additional CSS] to adjust the width for full-size displays:

      .container.main-content-area {
          width: 70%;
      }

However, it’s also limiting the width of my content to 70% of the screen when viewed on my phone, but I need the width to be about 100% when viewed on small/mobile displays. What code could I use (and where to insert the code)?

Thank you kindly.

Hello there,

I hope you are doing well today.

Can you please provide an image of the issue along with a link to the page?

Best Regards,
Support

Hi,

A link to the page will be fine, so that we can check the issue. But you can try this solution, literally a guess, go to Appearance -> Customize -> Additional CSS,

@media only screen 
  and (max-width: 480px) {
.container.main-content-area {
width: 100%;
}
}

If that didn’t help, please pass us the website link that is in question.

Let us know,

Thanks,
laranz.

Thank you - but the @media query is not working. I tested it on my iphone, and I tried using different sizes (for example, max-width: 400px, 800px, etc.). When I view my site from my iphone there is lots of unused margins to the left and right, even though I have specified the .container.main-content-area width at 100%. I want my image and text to span nearly 100% of the window width. My site is intechio.com, and please see the attached screenshot from my iphone.

It is displaying fine for me on your shared site as shown in the attached screenshot.

Could you please test it clearing your browser cache?

Dear Movin -

I see now the problem is beyond the issue with the @media CSS being ignored. In fact, ALL CSS rules I add to Appearance -> Customize -> Additional CSS do not affect the site when viewed from my iphone. For example, I added the following code:

.entry-title {
font-size: 10px;
}

As expected, when viewed from my desktop, the title text (i.e. “Post Grid”) is small 10px font. However, my iphone shows the default 28px font (please see attached screenshots). I just can’t seem to control the mobile site CSS style from the Additional CSS window.

(Note: I also tried the “Clear History and Website Data” from my iphone Settings menu.)

Actually, it seems like changes to the CSS take a long time (maybe 15 minutes) before they show up when viewing the site on my phone.

So sorry to keep moving the goalpost, but I was going back and forth between refreshing the site on my desktop and refreshing it on my iphone, and I didn’t expect that suddenly the CSS rules would become active for my site, viewed from my iphone. If you can please comment on one final thing:

The only code I have right now in Appearance -> Customize -> Additional CSS is this:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

@media only screen
and (max-width: 800px) {
.entry-title {
font-size: 40px;
}
}

The above code should ensure that, from my iphone, the text “Post Grid” shows up with 40 px font. Right now, the iphone still shows 10px, even though I deleted that CSS code 15minutes ago.

It should work on iPhone.

Could you please test it on iPhone by clearing your browser cache or using different browser?

I’ve narrowed down the problem: When I use my desktop pc to test my site on small screen sizes (by either shrinking the browser, or using a screen size emulator), any changes to CSS in “Additional CSS” take effect immediately. However, they don’t show up on my iphone for approximately 12 hours (after which, they seem to automatically show up). Last night, I tried: clearing my iphone Safari browser data, using the Chrome iphone browser, and using a relative’s iphone. In all 3 cases, the CSS didn’t show up until this morning. Good news is that the @media queries work. Thanks.

Hi, can you please help me that whether you themes works for my domain actually we have to buy one.In order to get more good design SEO friendly and Lightweight theme please help me once I bought a theme but it didn’t work.So now I am trying here

@dimery2006 Glad it is working for you after some time :slight_smile:

@srasra To help us keep support thread separates could you please create your own thread for your question here https://forums.colorlib.com/c/sparkling/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

How to change post width differently for pc and mobile screens.

@mehmood226

Please start a new ticket and provide link to your post, this can be fixed by the css code, I can help but please start a new ticket