[Resolved] Mobile space between elements

Home Forums Support Mobile space between elements

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #308614
    Rudy Vaughn

    Hi GP,

    I’m using GP and Beaver Builder to create this site: http://prototypes.graphiczen.com/mars/

    In mobile view the “Out of this World” was being hidden behind the logo and navigation so I added this css:

    @media
    (max-width: 768px) {
    .fl-rich-text h1 {
    margin: 150px 0 0px 0;
    }
    }

    It moved the sentenced down but added the same amount of space between elements. I added this css:

    @media
    (max-width: 768px) {
    .fl-rich-text h3 {
    margin: 0px 0 5px 0;
    }
    }

    This was to fix the space between the titles and the content below, and it doesn’t seem to be working. Can you help me target/write the correct css? I’m slowly learning this stuff from you guys and I appreciate your support.

    ~Rudy

    GeneratePress 1.3.46
    GP Premium 1.2.96
    #308643
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this:

    @media (max-width: 768px) {
        .page-header-content {
            margin-top: 150px;
        }
    }
    #308733
    Rudy Vaughn

    Hi Tom,

    The code you provided moved everything down 150px, and left a large white space at the top of mobile, though it guided me in the right direction. The actual target was the row/node element. Posting here so it might help someone in the future.


    @media
    (max-width: 768px) {
    .fl-row .fl-node-57ec2fe690196 {
    margin-top: 150px;
    }
    }

    Thanks as always for the help!

    #308785
    Tom
    Lead Developer
    Lead Developer

    Ah! Glad you found a solution. Thanks for posting it 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.