CSS Code for moving Subscribe bar

[dmimcc]

Hi,

I’m still super new to this and I’m trying to figure out how use the css editor to move the subscribe button to the right. That way it’s aligned nice with the map. Also… On the last part of the map section I have this white divider. I planned to add a image so I can make a get started container but when I do that it still has that weird white spacing. I am attaching an image of the box I need to align (red sub) and a highlighted area for the white gap.

Thank you!

[paul.r]

Hi,

Thanks for writing in!

To achieve that, you can add a unique class to your prompt element.

Then add this in Theme Options > CSS

.my-prompt .x-prompt-section-button {
    display:block;
    margin-top:10px;
}

Hope that helps

[dmimcc]

Disregard the above. I was able to switch the columns and make it fit clean. I’m just struggling with the Nav bar on mobile it doesn’t fit. Is there any way for me to had the nav bar in mobile as a stack? Also, the gap above my intro page and below my get started box w map still has those white gaps.

mass.sh/WP

[ruenel]

Hello There,

Thanks for updating in!

For you navbar, please add navigation dropdown element next to the existing navigation inline element. The navigation inline should only be visible is larger screens and the navigation dropdown will need to be only visible in smaller screens. You can achieve all this by utilizing the “Hide During Breadkpoints” option which can be found in the “Customize” tab of the navigation element. To know more about the “Hide During Breakpoint” option, please check this out for a better explanation: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

And to remove the gap above and below the page contents, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.hentry .entry-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

We would loved to know if this has work for you. Thank you.

[dmimcc]

Thanks for the continued support!

It did make it smaller, but there is still some gap (screenshot included). I tried to do some digging and I appreciate the forum reference as I solved that problem. Is there any good resource for learning to edit the CSS easier?

Thanks!

[nabeel]

Hi again,

The gap is because of an empty <p></p> tag in your content

You can get rid of the gap either by removing those tags from your content or try adding the following code in the Theme Options > CSS:

p:empty {
    display: none;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!