Home>Support>Masthead MetaSlider Full Width Issue

Masthead MetaSlider Full Width Issue

By DBrowne, 12 days ago. Last reply by Alex S, 7 days ago.

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

This is a free community support forum. Replies are not guaranteed. If you need professional email support, please purchase a SiteOrigin Premium license.

  1. 8 days, 19 hours ago Alex S Hi, I Work Here

    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.

  2. 7 days, 22 hours ago DBrowne

    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

  3. 7 days, 22 hours ago DBrowne
    #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;
    }
  4. 7 days, 22 hours ago Alex S Hi, I Work Here

    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.

  5. 7 days, 6 hours ago DBrowne

    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

  6. 7 days, 3 hours ago Alex S Hi, I Work Here

    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.

  7. 7 days, 3 hours ago DBrowne

    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

  8. 7 days, 3 hours ago Alex S Hi, I Work Here

    Hi Duncan,

    Unfortunately, I’m unable to see the adjusted masthead. Can you please try clearing your page cache plugin?

  9. 7 days, 3 hours ago DBrowne

    Hi Alex,

    Hopefully visible to you now,

    Kind regards,
    Duncan

  10. 7 days, 2 hours ago Alex S Hi, I Work Here

    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.

  11. 7 days, 1 hour ago DBrowne

    Hi Alex,

    Worked a charm! Thank you very much for your help on all this.

    Kind regards,
    Duncan

  12. 7 days, 1 hour ago Alex S Hi, I Work Here

    Hi Duncan,

    Happy to help! :)
    Please be sure to post another thread if you have any other questions.

Please log in to post on our forums. Signing up is free.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More