mobile css input
-
Hi,
I’ve added certain customization with CSS to a few pages on my site which has caused the normal theme layout for those pages to not be mobile friendly. Ordinarily without my CSS changes they are fine.
An example of the page I am querying is: http://bbtafrica.co.za/btg-magazine/
The CSS that I added is:
.page-id-1771 #main {
width: 1154px;
margin: auto;
padding: 20px;
background: rgba(255,255,255,0.5);
border-radius: 22px;
color: #222;
text-shadow: none;
}Is there any mobile CSS that I can add into the above so that the page looks good on mobile as well as remain the way it looks on the desktop?
Any input is welcome :)
Thanks
cage
The blog I need help with is: (visible only to logged in users)
-
Hi
The statement makes the page not to be mobile friendly is
width: 1154px.
This sentence forces your main area to be this width even if your visitor screen has less width (as in mobile phones). If you delete this line, main area width will adjust automatically, so I would suggest you to do that.
Your problem in this case could be your blue credits-box would be over your content text in not very wide screens. If you want to add a gap between your content and the blue box, you can add the following css Custom code:
.credits-box { margin-left: 3%; }I hope this helps you.
-
staff-jeanpierreac thanks for the input. I tried that but it takes away slightly from what I want on the desktop site. The width: 1154px was put in so that the background shadow aligns with the header width. If I remove it, then the shadow spills out. My OCD wont be peaceful if it doesnt align :)
That being said, I did try doing what you suggested but it doesnt fix my mobile theme issue, which upon further reflection, I think is maybe because i’ve got too much CSS and custom html on that page and not because what you suggested was incorrect.
I guess I was hoping to have the best of everything… I might have to reconsider how I structure things, unless you have any other suggestions that I could try?
-
Hey staff-jeanpierreac – Just wanted to say thank you… your suggestion got me thinking in the right direction… taking into account what you said, I altered my css so that instead of width I now have max-width so that the theme responds to the device a little better. I also altered the .blue box css so that instead of 300px I reduced the size to 280px.
It is now starting to look a little better on the mobile theme. I will still need to figure out the second half of the page, but I’m happy you put me on the right track.
- The topic ‘mobile css input’ is closed to new replies.
WordPress.com Forums 