Archived topic

Footer widgets breakpoint

5 replies · Started by Rolandas on October 17, 2020

Viewing posts 1–6 of 6

October 17, 2020 at 1:20 pm #1493607

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

October 18, 2020 at 2:25 am #1493978

Hi there,

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

October 18, 2020 at 12:52 pm #1494720

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

October 18, 2020 at 2:43 pm #1494783

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.

October 18, 2020 at 4:11 pm #1494837

Yes

October 18, 2020 at 5:36 pm #1494867

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.

This archived topic is closed to new replies.

Start building better websites today.