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)?
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.
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.
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.)
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.
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
@srasra To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.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.
