Archived topic

Mobile space between elements

3 replies · Started by Rudy Vaughn on April 21, 2017

Viewing posts 1–4 of 4

April 21, 2017 at 10:07 am #308614

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

April 21, 2017 at 11:34 am #308643

Hi there,

Try this:

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

April 21, 2017 at 5:10 pm #308733

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!

April 21, 2017 at 8:03 pm #308785

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

This archived topic is closed to new replies.

Start building better websites today.