Padding for Mobile Vs Larger Screens

gdaytaiwan
(@gdaytaiwan)

8 years, 11 months ago

Hi there

I’d like to have more padding for the columns and rows on all screens larger than mobile. However, I find that if I use the current default padding function, it would look perfectly spaced on larger resolutions, but then there is way too much padding on the mobile view.

Is there extra css I could use to minimise padding on mobile only? It just looks so spaced out and unprofessional >.<

My website is http://www.gdaytaiwan.com .

Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author PickPlugins
(@pickplugins)

8 years, 11 months ago
Thanks for your post.

you can add media query for small device on custom CSS field.
```
@media only screen and (max-width: 500px) {

}
```
Here is some example
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Regards
Thread Starter gdaytaiwan
(@gdaytaiwan)

8 years, 11 months ago
Hi there

Thank you for your reply. I tried the CSS you gave me but it didn’t work.
then looking on the other websites you suggested, I played around with these but still none of them work:
```
@media only screen and (max-width: 500px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}
```
```
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}
```
Not sure what I’m doing wrong. Is it possible to suggest an exact one for my website?
Thread Starter gdaytaiwan
(@gdaytaiwan)

8 years, 11 months ago

Also please note that it works fine in the landscape view on mobile. What I want to fix is the portrait view.

Currently the mobile settings is set to 100%. I do this so that it wouldn’t distort the image in portrait view but this ends up making the padding very big. If I change the mobile settings to 500px say, the padding is less, but the featured image gets cut off.

Really want to get this fixed, so any help would be appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Padding for Mobile Vs Larger Screens’ is closed to new replies.

Tags