[Support request] Footer widgets breakpoint

Home Forums Support [Support request] Footer widgets breakpoint

Home Forums Support Footer widgets breakpoint

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1493607
    Rolandas

    Hi

    Please tell me how to change footer widgets breakpoint?
    It is now set to 768px.
    After this point, all
    .footer-widgets .footer-widgets-#
    become 100% wide.

    Now work for me up to 768px

    .inside-footer-widgets {
    	display: flex;
    	flex-wrap: wrap;
    }
    .inside-footer-widgets {
    	flex-wrap: wrap;
    }
    .footer-widgets .footer-widget-1 {
    	flex-basis: 100%;
    }
    .footer-widgets .footer-widget-2 {
    	flex-basis: 41%;
    }
    .footer-widgets .footer-widget-3 {
    	flex-basis: 18%;
    }
    .footer-widgets .footer-widget-4 {
    	flex-basis: 41%;
    }
    @media all and (max-width: 940px) {
    	.footer-widgets .footer-widget-2 {
    		flex-basis: 70%;
    	}
    	.footer-widgets .footer-widget-3 {
    		flex-basis: 30%;
    	}
    	.footer-widgets .footer-widget-4 {
    		flex-basis: 100%;
    	}
    }

    I want to achieve the following effect:

    @media (max-width: MY-BREAKPOINT px) {
    	.footer-widgets .footer-widget-1 {
    		flex-basis: 100%;
    	}
    	.footer-widgets .footer-widget-2 {
    		flex-basis: 70%;
    	}
    	.footer-widgets .footer-widget-3 {
    		flex-basis: 30%;
    	}
    	.footer-widgets .footer-widget-4 {
    		flex-basis: 100%;
    	}
    }
    @media (max-width: MY-NEW-BREAKPOINT px) {
    	.footer-widgets .footer-widget-1 {
    		flex-basis: 100%;
    	}
    	.footer-widgets .footer-widget-2 {
    		flex-basis: 100%;
    	}
    	.footer-widgets .footer-widget-3 {
    		flex-basis: 100%;
    	}
    	.footer-widgets .footer-widget-4 {
    		flex-basis: 100%;
    	}
    }

    I use
    latest version of the theme: 3.0.2
    latest version of GP Premium: 1.12.2
    and
    General > Strukture is set for FLEXBOX

    #1493978
    David
    Staff
    Customer Support

    Hi there,

    do you have this setup on a site already so i can take a look at what you have so far?

    #1494720
    Rolandas

    Now I am constructing this website, just started (all only on staging site).
    I started from footer, and stopped at 768px 🙂

    #1494783
    Elvin
    Staff
    Customer Support

    Hi,

    Can you link us to the site you’re working on? So we could pinpoint the best answer for you.

    Tip: Some sites from our Site Library imports custom CSS codes on Appearance > Customize > Additional CSS.

    It may be worth scanning through for CSS codes with @media queries related to the footer. Perhaps you can even change and use them to achieve the layout you want.

    #1494837
    Rolandas

    Yes

    #1494867
    Elvin
    Staff
    Customer Support

    To clarify, is the new breakpoint you’re trying add for your footer, smaller than 768px? If so,

    I think this will be giving you issues:

    @media (max-width: 768px)
    .inside-footer-widgets {
        flex-direction: column;
    }

    This code is from widget.min.css, a default css from the theme.

    What this does is, it causes flexbox items to stack/display vertically.

    Meaning flexbox items will not display in a row regardless if multiple items don’t exceed 100% of the row width.

    If you want to achieve the following effect where things display in rows but will flex-wrap, flex-direction must be set to “row.

    You can try overriding the default flex-direction by editing the widget.css file (NOT RECOMMENDED).

    Or by adding this:

    @media (max-width: 768px){
    .inside-footer-widgets {
        flex-direction: row !important;
    }
    }

    Let us know how it goes.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.