Hi There!
Please can someone help me ‘Full Width’ my Masthead MetaSlider on my websites front page? It only seems to match the width of the menu. Also you may notice a tiny gap of padding between bottom of slider and top of menu, roughly 5px? Any CSS to stop this?
https://genalog.com/
Strangely it also now seems to have a mind of it’s own about whether or not it cycles through the slides.
Any help will be greatly appreciated,
Kind regards,
Duncan
Genalog Ltd
Hi Duncan,
You can remove this spacing with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS:
.layout-full .panel-row-style.panel-row-style-full-width { padding-top: 0; padding-bottom: 0; }You might also need to install the SiteOrigin CSS Editor.
Hi Alex,
Many thanks for your reply. I do already have the custom CSS editor and have input as advised. If you could please follow the link to our website both problems still persist: Slider is not full screen width and there is the gap above menu and below slider.
Have you anything else that you think might work?
Or perhaps you can see some of our other custom CSS that is overriding yours?
Kindest regards,
Duncan
#page-title, article.post .entry-header h1.entry-title, article.page .entry-header h1.entry-title { text-align: center; } .entry-content img { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } /* Full header logo */ header#masthead { padding: 0 !important; } header#masthead hgroup { padding: 0 !important; } header#masthead hgroup .logo img { width: 1400px; } .main-navigation { margin: 0 !important; } body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar { display: none !important; } /* Headline Widget */ .widget_headline-widget h1 { color: #ffffff; font-size: 26px; letter-spacing: 1px; line-height: 36px; margin: 50; padding-top: 150px; text-transform: uppercase; } .widget_headline-widget .decoration { position: relative; height: 0px; border-top: 1px solid #EEE; margin: 50px 50px 50px 50px; } .widget_headline-widget h3 { color: #ffffff; font-size: 19px; font-weight: 300; margin: 50; padding-bottom: 150px; } /* Header Padding */ header#masthead .hgroup { padding-bottom: 0px !important; padding-top: 0px !important; } .hgroup.full-container { display: none; } .home .hgroup.full-container { display: block; } /* 100% Width Header */ #masthead .hgroup.full-container { max-width: 4000px !important; width: 100% } /*reduce logo padding */ div#logo { padding-top: 0px; padding-bottom: 0px; } @media (min-width: 680px) { /* Main Menu */ body.responsive.layout-full #page-wrapper .site-navigation .full-container { max-width: 95%; } } .layout-full .panel-row-style.panel-row-style-full-width { padding-top: 0; padding-bottom: 0; }Hi DBrowne,
Unfortunately, I can’t seem to see the describing spacing. Can you please provide me with a screenshot of what you’re seeing? Please note that we’re currently unable to process attachments so you’ll need to upload the screenshot to a third party image hosting site like Imgur or vgy.me.
Hi Alex,
No problem, please follow this link: https://genalog.com/wp-content/uploads/2019/01/MastHeadWidth.png to screenshots of my home page.
I have highlighted the areas concerned, the gap is above menu and below mast head slider. You can see more clearly when a menu is hovered into a different colour. Also you can see that either side of the slider there is a gap so the background blue is visible. This is responsive to shrinking if making a window smaller but normal monitor fullscreen it is not wide enough to fill.
Many thanks,
Duncan
Hi Duncan,
Thanks. Oddly, I’m unable to see that on your page but it looks like you’re adding this widget to the Masthead widget area – if you’re adding it to the header widget area, please move it to the masthead widget area. Widgets aren’t full width by default so you’ll need to set up the Meta Slider to allow for it to be full width. Please remove the Meta Slider widget and replace it with a Layout Builder widget. The Layout Builder widget is the full SiteOrigin Page Builder interface in widget form so you’re given more over the widget than the standard widget interface allows for.
Open the Layout builder widget and then add a new one column row. Open the row by clicking the wrench icon above the row and then head over to the row styles sidebar. Open the Layout settings group and set the Row Layout to Full Width Stretched. Close the row and then add a Meta Slider widget to the row and set it up as desired.
How does that look?
If that doesn’t look as desired, please keep it the widget present so I can inspect the slider to work out what went wrong.
Hi Alex,
Ah! Yes thank you that makes more sense, have set up masthead with the layout builder and worked fine. Still have gap between however and very weirdly, may be a caching issue, when I’m not logged in or private browsing mode the masthead isn’t visible. I think you mentioned this, if that is what you meant be unable to see on my page? https://genalog.com/
Additionally when I’m logged in the sliders under ‘servicing….’ do not do the new strange drop down animation when they first load. Otherwise it is as desired when logged in!
Many thanks,
Duncan
Hi Duncan,
Unfortunately, I’m unable to see the adjusted masthead. Can you please try clearing your page cache plugin?
Hi Alex,
Hopefully visible to you now,
Kind regards,
Duncan
Hi Duncan,
Thanks – I can now see the Meta Slider in your masthead widget area. You can remove the small strip at the bottom of the Meta Slider by adding some Custom CSS to your website. Please navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS:
#masthead-widgets .widget ul li { padding-bottom: 0; }You might also need to install the SiteOrigin CSS Editor.
Hi Alex,
Worked a charm! Thank you very much for your help on all this.
Kind regards,
Duncan
Hi Duncan,
Happy to help! :)
Please be sure to post another thread if you have any other questions.