Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • December 8, 2017 at 7:15 pm #886575
    larrystick

    On this page: http://seacuisine.com/wild-salmon-strips-landing-page-3/

    I have three color sections. I want a 10 pixel separator between the color sections.
    When I add a 10 pixel Whitespace element, the vertical space between the color sections grows to over 120 pixels.
    I have tried using Whitespace, another color section, and a code block, but each of these elements creates the same 120pixel vertical space.

    Is there custom CSS needed to minimize the verbal spacing? Or is there another workaround I have not tried?

    • This topic was modified 7 years, 7 months ago by larrystick.
    December 9, 2017 at 1:11 am #886708
    Jordan Shannon

    Hey larrystick,

    Add this to quick css:

    .template-page.content.av-content-full.alpha.units{
padding:0px 0px!important;
}

    Best regards,
    Jordan Shannon

    December 11, 2017 at 4:31 pm #887493
    larrystick

    Thank you Jordan. Your code fixed the problem on the Macintosh OS Safari browser, however the problem remains on the Google Chrome browser, and on the iPhone iOS Safari Browser.

    Might you have some more code I can try?

    December 12, 2017 at 12:56 am #887622
    Jordan Shannon

    Hi,

    Have you attempted to hard clear the cache in those browsers? I performed the fix on a Chrome browser and the code should be universal.

    Best regards,
    Jordan Shannon

    December 12, 2017 at 5:41 pm #888011
    larrystick

    Thanks for your help. I have cleared the cache on Chrome, but with no change to the spacing. The large spaces are also appearing on the iPhone. Both the Safari and Chrome browsers on the phone have the large spaces.

    Do you think your CSS is conflicting, or being over-ridden by other Quick CSS I have in my site? I’ll add all the Quick CSS in the private content box for you.

    December 12, 2017 at 6:48 pm #888025
    Jordan Shannon

    Hi,

    The spaces are only showing on the mobile browsers?

    Best regards,
    Jordan Shannon

    December 12, 2017 at 7:07 pm #888036
    larrystick

    Sadly, no, the spaces are also showing on the desktop Chrome browser (Version 63.0.3239.84) on my Macintosh 2017 iMac. They are also showing on both iPhone mobile browsers (Safari for macOS, and Chrome for macOS).

    December 13, 2017 at 7:11 am #888237
    Rikard

    Hi,

    Thanks for the feedback, please try the following in Quick CSS under Enfold->General Styling:

    .content {
    padding:0 !important;
}

    Best regards,
    Rikard

    December 13, 2017 at 7:23 pm #888510
    larrystick

    Thank you. That code does, indeed close the space between the color sections. However it also closes the space down for ALL sections. The site has a few hundred pages, so editing them all is not in the budget.

    So we still have not come to a solution, but I am still hopeful… Who can help?

    December 13, 2017 at 11:52 pm #888633
    Jordan Shannon

    Hi,

    It is only the page that you linked that needs help?

    Best regards,
    Jordan Shannon

    December 13, 2017 at 11:54 pm #888635
    larrystick

    Yes.

    December 14, 2017 at 12:12 am #888639
    Jordan Shannon

    Hi,

    Add this adjustment to Rikard’s css:

    .page-id-6896 .content {
    padding:0 !important;
}

    Best regards,
    Jordan Shannon

    December 14, 2017 at 12:20 am #888641
    larrystick

    Excellent. That works on all three browsers, including mobile. Thanks very much.

    December 14, 2017 at 12:24 am #888643
    Jordan Shannon

    Hi,

    No problem at all. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘How to minimize vertical space between color sections.’ is closed to new replies.