Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 10, 2019 at 9:34 pm #1108883
    barrett5

    Hello Dear Support!
    The specific webpage referenced in the Private Content window is the portfolio item that I have changed so that the mobile appearance is better. Basically, I am hiding some of the elements in the left column (back to Work, Related Projects and the associated white separators) on mobile so that the mobile user can get right to the project description after seeing the images in Easy Slider. There is the unfortunate white space after the Color Section on mobile – that is what I would like to remove. Everything looks fine on desktop.

    I am viewing the mobile on an iPhone if that makes any difference.

    Thanks in advance for your help.

    Cheers, Leslie

    June 11, 2019 at 12:54 am #1108951
    Jordan Shannon

    Hey Leslie,

    I’m not easily seeing the issue. Can you screenshot the problem?

    Best regards,
    Jordan Shannon

    June 11, 2019 at 5:30 pm #1109225
    barrett5

    Yes, thank you for your help. Here is the image: https://barrettstudio.com/wp-content/uploads/2019/06/Image-1.jpg

    The Color Section is the red bar, and below there is a lot of white space.

    June 12, 2019 at 6:00 am #1109364
    Rikard

    Hi,

    Thanks for the clarification. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.postid-6727 .template-page {
  padding-top:0;
}
}

    Best regards,
    Rikard

    June 12, 2019 at 5:52 pm #1109544
    barrett5

    Thanks, that worked beautifully. Is it possible to keep a little white space after? I tried checking “Custom top and bottom margin” and adding some to the bottom margin, but that didn’t work. Can I add something to the CSS?

    Also, the portfolio item that I showed you was my test portfolio item. I do want this CSS applied to all the portfolio items.

    Best,
    Leslie

    • This reply was modified 5 years, 6 months ago by barrett5.
    June 13, 2019 at 6:31 am #1109720
    Rikard

    Hi Leslie,

    Please try this CSS instead:

    @media only screen and (max-width: 767px) {
.portfolio-template-default .template-page {
  padding-top:0;
  padding-bottom:20px;
}
}

    Best regards,
    Rikard

    June 13, 2019 at 10:38 pm #1110134
    barrett5

    Hi Rikard,
    I tried out that CSS, but it only makes the color bar taller. It doesn’t add white space below the color bar.

    Any other thoughts?

    Leslie

    June 14, 2019 at 7:30 am #1110223
    Rikard

    Hi Leslie,

    Please try this instead:

    @media only screen and (max-width: 767px) {
.portfolio-template-default .template-page {
  padding-top:0;
  margin-bottom:20px;
}
}

    Best regards,
    Rikard

    June 18, 2019 at 7:55 pm #1111468
    barrett5

    Hi Rikard,

    I used this last CSS, which didn’t add white space by itself. But when I got into the actual Portfolio item, and edited the Color Section, I was able to click the “Custom top and bottom margin” box and add the margin there. The combination of your CSS and the Color Section change made it appear as I wanted – customizable white space on the mobile version. Looks great now, thanks so much for your help.

    Leslie

    June 19, 2019 at 5:06 am #1111527
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘White space below Color Sections, on Mobile devices’ is closed to new replies.