Reduce Gap b/w Header & Image (Mobile)

[leone]

Is there code to reduce the gap below the header & above the top image on Mobile devices only. This is the page I’m trying to fix.(http://rleone.com/artwork/)

[christian]

Hey Robert,

Regretfully, there’s no option for that. You’d need to add this CSS code in Theme Options > CSS.

@media (max-width:979px) {
    .x-navbar .x-brand {
        margin-top: 20px;
    }
}

The space below the header is the Breadcrumbs and Title area. Because the Title’s color is white as set in Theme Options (Headline) and the background is white also, it got washed out. You can target that specific area using this code to be added in Theme Options > CSS.

.h-landmark, .entry-title.h-landmark {
    color: black;
}

If you wish to completely removed that area, disable the Breadcrumbs in Theme Options > Header.

Hope that helps.

[leone]

I’m a little confused. The first piece of code you provided seems to control the area above the logo/title. I want to reduce the gap that exists below the logo/title, and the first image on the page (on mobile only).

[Prasant]

Hello Robert,

Thanks for updating the thread.

Please add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  .x-container.offset{margin-top: 0 !important;}
  header.x-header-landmark {
    padding-bottom: 0 !important;
}
}

After that open the page in Pro Theme content builder and inspect the section that’s holding first three images. Under Customize > Setup > Class add a class name to section.

Now, add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  .custom-css .x-container {
    margin-top: 0;
}
}

You have the options of changing the class name as per your requirement.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.