Correcting margins (or padding?) on mobile view

[SueParticipant]

Correcting margins (or padding?) on mobile view

Resolved

Hello,

I searched the support forum first FYI; didn’t see this topic,so:

Please see attachment – the mobile view of the front page widget area is pushed to the left — how can I correct this?

Thanks very much. Hoping to correct this in next few hours before sharing site with someone.

Sue

[Oliver JuhasKeymaster]

Hi Sue,

Please note that your image was not attached due to large image size. Try to convert the image to JPG so the image size (in KB) is smaller and it can be attached – it has to be less than 200 KB as stated in ticket/reply form information.

Do you experience the same issue on theme demo website? If not, please provide me with an access to your website so I can check the issue personally.

You might be interested…

• Theme demo

Best regards,

Oliver Juhas
WebMan Design

[SueParticipant]

Okay, thank you. I have attached an image of the mobile view,, which shows how front-page widget content is jammed to the left.

I did not see the theme demo site where I can control mobile/tablet views, etc.

Thank you for your direction on this.

Sue

[Oliver JuhasKeymaster]

Hi Sue,

Thank you for spotting this issue. Indeed, there is a problem with theme styles when only 2 widgets are displayed in front page widget area. I will fix this issue in next theme update. Meanwhile you can use this custom CSS to fix it:

@media only screen and (max-width: 41.99em) {
  .front-page-widgets-container .widget {
    width: 96%;
  }
}

You might be interested…

• Custom CSS

Best regards,

Oliver Juhas
WebMan Design

[SueParticipant]

Thanks – I applied that but it actually didn’t work (no changes appeared on mobile view).

Here’s a snapshot of my Additional CSS, in case you spot something that might be causing problems?

Thank you and I’ll stay tuned.

Sue

• This reply was modified 2 weeks, 2 days ago by  Sue.

Attachments:

You must be logged in to view attached files.

[Oliver JuhasKeymaster]

Hi Sue,

In that case just rise the specificity of the CSS selector, something like:

@media only screen and (max-width: 41.99em) {
  .site .widget-area.front-page-widgets-container .widget {
    width: 96%;
  }
}

Tip: If you want to validate your custom CSS code, you can do so at https://jigsaw.w3.org/css-validator/#validate_by_input

You might be interested…

• Custom CSS

Best regards,

Oliver Juhas
WebMan Design

[SueParticipant]

Thanks – Strangely enough, it still looks the same, no change.

Another change that is not “taking” is changes I made to the header navigation colors – background and text. I’m lost as to why this isn’t showing on my phone (and yes I keep refreshing …).

Thanks again and I hope we can figure out what’s going on.

:) Sue

[Oliver JuhasKeymaster]

Hi Sue,

The new code works perfectly fine for me. I can see it works fine on your website too. Maybe you just need to flush your browser cache?

You might be interested…

• Refreshing browser cache

Best regards,

Oliver Juhas
WebMan Design

[SueParticipant]

Ok, great. I cleared my browswer cache and still no luck; I then “purged all” under caching in the site itself, and that seemed to do the trick.

Your “You Might Be Interested” tips are super useful.

Thanks again!

Sue

[Oliver JuhasKeymaster]

Hi Sue,

I haven’t noticed you are using a server cache. Indeed, if you are using such caching, you need to first flush that one.

If I may advice you, during the website development/building process it is recommended not to use any server caching solution (I don’t know if you have enabled the caching in your hosting account or via a plugin in WordPress). I suggest to enable server caching only after you are happy with the website and it can “go live”.

Best regards,

Oliver Juhas
WebMan Design

[Author]

Posts