Viewing Have padding for desktop view, but no padding for mobile view?
Have padding for desktop view, but no padding for mobile view?
|
User: John S. 11 years ago
|
|
|
When people are using their laptops or desktop computers, I'd like to have a 10 px pad at the top and bottom of the page. My site looks good with the added space. But on an iPad or sell phone, the added space doesn't make sense, so I'd like to eliminate it. The question is - how? I know very little about CSS, not even sure that's the right way to go about this. I think this is how it needs to work - 1) need HTML in the body that decides if the user on a laptop/desktop or a mobile device 2) need to content with Retina because that skews pixel threshold 3) If mobile, then no pad 4) If laptop/desk top, then add pad To trigger the CSS sheet, maybe something like this? <link rel="stylesheet" type="text/css"So the webpage would have padding by default (accommodating laptop / desktop users), but if it's mobile client, then the padding goes away and it's a CSS sheet that's doing that. I'd love to do via just adding a statement to "Header / Footer Code" and avoiding the CSS sheet, etc. Thank you |
|
|
User: Roddy 11 years ago
|
|
|
You would use media queries for this. EverWeb adds the margin to both the body and the div.container so you would add your media query like this to the Site WIde Head Code box in the Site Publishing Settings page… <style type="text/css"> @media screen and (max-width: 780px) { body, div.container{margin:0 auto}} </style> ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
✔ Best Answer
|
|
|
User: John S. 11 years ago
|
|
|
Thank you Roddy. That did the trick - and easier than expected. Curious, why did you picked 780px as the breakpoint? I was thinking 768px (iPads) or 960px (for some of the wider tablets). |
|
|
User: Roddy 11 years ago
|
|
|
Quote: Curious, why did you picked 780px as the breakpoint? I was thinking 768px (iPads) or 960px (for some of the wider tablets). From bitter experience when designing responsive websites. Because of my background in sound engineering and music production I tend to think of this as a crossover point. When it is stated as being exactly the width of a device like the iPad, it can cause weird behavior like the flicker effect. When you see it you will know what it is! ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: John S. 11 years ago
|
|
I think my iPad had the old CSS in its browser cache. I had to tweak the code a little -<!-- Zero Margin for iPad Portrait -->That's eliminating two very specific cases and does nothing about tablet users - which frankly, Android tablet users are maybe 2-3% of my traffic. My site's content is too wide for smart phone users. They are ~10% of my traffic, but I'm not going to write a bunch of cases to address all those possible sizes. Dealing with the iPad and iPad Retina screens is good enough, for now anyways. |
|
|
User: Roddy 11 years ago
|
|
|
I think you are confusing device width and pixel density here. Both the iPad and the iPad Retina have the same screen (device) width. The Retina model has a much higher pixel density. The code… <style type="text/css"> @media screen and (max-width: 780px) { body, div.container{margin:0 auto}} </style> … will remove the margin on all browser/devices narrower than 780px which includes iPad and iPad Mini. The margin will still be present when the site is viewed on say an iPad in landscape mode. If you want to target this specific device in landscape mode you would use… @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) Quote: My site's content is too wide for smart phone users. All websites wider then about 420px are too wide for smart phone users. This is why it is recommended that you create a "mobile" version of the site. In the same way, all websites wider than about 800px are too wide for tablet users since most of then use portrait mode for surfing the 'net. Page width is not the only consideration for modern web design since we need to change the navigation style for mobile devices and use CTAs instead of text hyperlinks. ALL user inputs should be adapted for fingertips and the minimum is 30px x 30px. In view of the fact that computer sales are falling and those of smart phones and tablets are rising, any website wider than 800px is, in general, a waste of time. See this page for some guidelines about design… http://everwebcodebox.com/html5/design/design-basics.html … testing… http://everwebcodebox.com/html5/design/build-test.html for tablet… http://everwebcodebox.com/html5/design/ipad.html … and smart phone… http://everwebcodebox.com/html5/design/iphone.html Each of the last two pages has a link to a page showing how the design looks on the devices. Tablets and smart phones should be the primary focus for any commercial website and using HTML5 elements will improve SEO enormously… http://everwebcodebox.com/html5/design/seo.html ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: John S. 11 years ago
|
|
|
Hi Roddy - I get what you're saying, but the 768px wasn't working with my iPad Air. When I added the 1536px, it worked. When googling this, other people are using the 1536x2048 metrics to identify Retina iPads in similar style statements. I don't who or what is right, all I know is that I'm getting intended result and testing across a Mac (Safari, Chrome & Firefox), PC (Explorer & Firefox) and an iPad Air. If I get a reasonably consistent experience across all those devices, I'm happy. My ambition level (with reference to removing the 10px padding) is only to alter this detail on the iPad. This is a personal website (not a store front or business) with 300+ pages full of text and images. Re-working that into a mobile site would be massive undertaking with no payback on the time. The site originated over 10 years ago and was never intended for a mobile user. Going back and trying to do that now is just too much work. |
|
| Post Reply |
| You must login or signup to post. |