Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 9, 2022 at 11:04 pm #1357834
    Veronika

    Hi,

    I would like to change the width only on my mobile version from this: https://imgur.com/g8rgHul to this: https://imgur.com/OGaEn2p on all my pages.

    I found this via inspector and tried to change it, but unfortunately it had a huge bad impact the page.

    .responsive #top #wrap_all .av-flex-cells .no_margin{
    display: block;
    margin: 0;
    height:auto !important;
    overflow: hidden;
    padding-left:6% !important;
    padding-right:6% !important;
    }

    (I tried to change it to 6%)

    What should I change, to achieve the desired look?

    Thank you

    Best,
    Veronika

    July 9, 2022 at 11:58 pm #1357839
    Mike

    Hey Veronika,
    Try this instead:

    @media only screen and (max-width: 767px) { 
.responsive #top #wrap_all #main .av-flex-cells .no_margin:not(.av-zero-column-padding){
padding-left:6% !important;
padding-right:6% !important;
}
.responsive #top #wrap_all #main .av-flex-cells .no_margin.av-zero-padding{
padding-left:0 !important;
padding-right:0 !important;
}
}

    Best regards,
    Mike

    July 10, 2022 at 2:30 pm #1357876
    Veronika

    Hi Mike,

    thank you, it worked perfectly on the first section. The rest of my welcome page is using color sections and the code you provided does not change the width on them. So I changed the color sections to a grid row, just like the first section, in hope your code would apply to them too. Unfortunately it did not. It also not changing the width on the “all posts” Sid on the mobile version. Do I have to add something, so it will apply on all the grid rows and on the all posts page?

    Thank you very much for your time and advice

    Best,
    Veronika

    July 10, 2022 at 5:54 pm #1357885
    Mike

    Hi,
    Thanks for the feedback, so when I looked at your homepage on mobile the very first image is 100% width, I thought this was desired, then after it are some posts that your screenshot indicated to have the 6% padding, so far good right?
    Now below when I see the other two full-width image sections, I assume they are like the top one and should remain full width, correct?
    ▸ Sind Gesichtssprays wirklich hilfreich?
    ▸ Sind Neujahrsvorsaetze gemacht um zu scheitern?
    plus:
    ▸ Hier entsteht in Kürze ein Newsletter
    Now originally I thought the posts after “Sind Gesichtssprays wirklich hilfreich?” were 6% also, but I see they are not, my mistake.
    So for those grid rows I added a custom class paddingsix
    2022-07-10_112511.jpg
    and below the grid rows you have color sections with columns, so to include these I added the custom class fakepaddingsix
    2022-07-10_114752.jpg
    then I updated the css to this:

    @media only screen and (max-width: 767px) { 
.responsive #top #wrap_all #main .av-flex-cells .no_margin:not(.av-zero-column-padding),
.responsive #top #wrap_all #main .av-flex-cells .paddingsix .no_margin {
padding-left:6% !important;
padding-right:6% !important;
}
.responsive #top #wrap_all #main .av-flex-cells .no_margin.av-zero-padding{
padding-left:0 !important;
padding-right:0 !important;
}
#top .fakepaddingsix {
  width: calc(100vw - 14%)!important; 
  position: relative !important; 
  left: calc(-44vw + 50%) !important; 
}
}

    please clear your browser cache and check.

    Best regards,
    Mike

    July 11, 2022 at 7:01 pm #1357973
    Veronika

    Hi,

    I replaced all color section on my welcome page which should have 6% distance to grid rows. Now the welcome page is working perfectly.

    How do I achieve this on all my pages and on all my posts as the standard width on mobile version?

    Thank you very much

    Best,
    Veronika

    July 12, 2022 at 3:52 am #1358016
    Mike

    Hi,
    I examined the post linked below, and it looks like it is using color sections, wich doesn’t use padding like the grid rows, the edge is created by the max-width being 85%
    This css works for this post, but I’m not sure if it will cause issues elsewhere on your site:

    @media only screen and (max-width: 767px){
.responsive #top #wrap_all #main .container {
    width: 100%;
    max-width: 100%;
    padding-left: 6%;
    padding-right: 6%;

}
}

    give this a try.

    Best regards,
    Mike

    July 12, 2022 at 3:35 pm #1358093
    Veronika

    Hi Mike,

    I tried it and it seems to work. I went through the website and could not find any new problems. Thank you :)

    Best,
    Veronika

    July 12, 2022 at 7:08 pm #1358113
    Mike

    Hi,
    Glad to hear, shall we close this issue then?

    Best regards,
    Mike

    July 12, 2022 at 9:17 pm #1358126
    Veronika

    Hi,

    yes, thank you :)

    Best,
    Veronika

    July 13, 2022 at 7:22 am #1358158
    Nikko

    Hi Veronika,

    I’m glad that Mike could help you :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘the width on mobile version’ is closed to new replies.