Correcting margins (or padding?) on mobile view

Home Forums Auberge Correcting margins (or padding?) on mobile view

Viewing 10 posts - 1 through 10 (of 11 total)
  • Author
    Posts
  • #18579

    Sue
    Participant

    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

    #18586

    Oliver Juhas
    Keymaster

    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.

    Best regards,

    Oliver Juhas
    WebMan Design

    #18616

    Sue
    Participant

    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

    #18622

    Oliver Juhas
    Keymaster

    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%;
      }
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #18627

    Sue
    Participant

    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 4 months, 1 week ago by  Sue.
    Attachments:
    You must be logged in to view attached files.
    #18629

    Oliver Juhas
    Keymaster

    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

    Best regards,

    Oliver Juhas
    WebMan Design

    #18631

    Sue
    Participant

    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

    #18632

    Oliver Juhas
    Keymaster

    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?

    Best regards,

    Oliver Juhas
    WebMan Design

    #18642

    Sue
    Participant

    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

    #18643

    Oliver Juhas
    Keymaster

    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

Viewing 10 posts - 1 through 10 (of 11 total)

You must be logged in to reply to this topic.