But I do appear to need one more bit of help with CSS –

What can I do to add some padding as the element is now overlapping the top of some pages a bit – see one example below.

FYI this is desktop view only. I have this issue via mobile taken care of using:

@media only screen and (max-width: 430px) {
.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 282px !important;
}
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
.responsive #top #wrap_all #main {
padding-top: 259px !important;
}
}

@media only screen and (max-width: 690px) and (orientation: landscape){
.responsive #top #wrap_all #main {
padding-top: 282px !important;
}
}

• This reply was modified 2 months, 2 weeks ago by biggsuccess.
• This reply was modified 2 months, 2 weeks ago by biggsuccess.

1) I was hoping there may be some CSS for mobile view of the banner – to look as it does on desktop and not collapse into a box with stacked text. If that isn’t possible that’s fine too.

2) Could you please assist me with a CSS suggestion for top margin/padding for the LayerSlider

I appreciate your help

• This reply was modified 2 months, 2 weeks ago by biggsuccess.

Mike that is amazing! Now if I want to add a little more padding between the bottom of the banner and the top of the menu what css should I use?

Also – anything I can do to make that a little nicer on mobile view?

And what I can do to prevent the top of the slider element below the menu on mobile view from not being cut off

• This reply was modified 2 months, 2 weeks ago by biggsuccess.
• This reply was modified 2 months, 2 weeks ago by biggsuccess.

Hey guys – I’m actually going to close this ticket. I found the WordPress plugin Blog Designer which works perfectly to accomplish the layout wanted for the blog page.

Thank you!

Thanks Mike – you are my hero again!

One more thing for the header section. My client would like for the logo to be bigger – any attempts to change the size in header editor doesn’t change the logo size, it only creates a larger gap below the image and menu.

I am using this header layout to have the 3 buttons

Is it possible to make the logo a little larger?

Thank you for that! The Special Heading element works on mobile in vertical view, but now only shows when the phone is flipped to horizontal view.

Do I have repeated CSS rules in here that I need to clean out? I don’t want to pull out anything important or mess up the order – added in private section.

• This reply was modified 10 months, 3 weeks ago by biggsuccess.

You are awesome!

One more request – can I reduce the amount of space between the text block and the layerslider?

Mike, thank you! As I’ve cleared cache, I see this is working perfectly on mobile and on laptop views. I really appreciate your work on this for me.

Hi Mike –

After applying the CSS, the issue improved some, but the 3rd button is stacked under the 2nd one.

Also, the header area is overlapping the slider right below it, cutting off the top images and words.

I really appreciate you help with this – what else can I try?

• This reply was modified 11 months ago by biggsuccess.
• This reply was modified 11 months ago by biggsuccess.

Thanks Rikard!

And FYI regarding the CSS from:

The style.css can also be accessed via FTP. Once you login to FTP go to wp-content/themes/enfold-child/style.css

*The stylesheet via FTP is where I’ve added the CSS for the header widget

Hi Mike thanks for continuing to help me with this…

I followed your instructions and which made it better. That brings the overlay down to the bottom of the logo – so that’s an improvement though I’d like the overlay to take up the full background as it does in the Aweber page that is not linked to Enfold. Is that possible?

Also – the mobile view of the page i has the overlay cutting off at just above the form button.

Hi Mike – I’ve got the link to the original below, and a screenshot of what I’m seeing.

On the original, created in aweber, the settings are:
background image with opacity set at 35%.

But once I link that Aweber page to Enfold, the opacity seems to scroll with the page? I’ve included a link to a screenshot of what I see.

Thank you Mike that worked! I appreciate the help from you and Nikko. As always you guys are amazing! We can close this topic.

Hi Nikko – the code you provided is in my quick CSS.
I’m using aweber landing pages via their plugin. The 2 pages with issues are linked via their app, which you’ll see.
Access info is below
Thank you for taking a closer look!