- This topic has 5 replies, 3 voices, and was last updated 3 years, 5 months ago by Elvin.
-
AuthorPosts
-
October 17, 2020 at 1:20 pm #1493607Rolandas
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 FLEXBOXOctober 18, 2020 at 2:25 am #1493978DavidStaffCustomer SupportHi 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 #1494720RolandasNow 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 #1494783ElvinStaffCustomer SupportHi,
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 #1494837RolandasYes
October 18, 2020 at 5:36 pm #1494867ElvinStaffCustomer SupportTo 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.
-
AuthorPosts
- You must be logged in to reply to this topic.