Archived topic
footer widget alignment
7 replies · Started by markus on November 3, 2020
I have seen similar topics in the help archives but I am having trouble creating the footer alignments in the screenshot here: https://ibb.co/pxWJjYV (especially for footer widget titles). Please note, these alignments should be for screens large enough to fit 4 footers across the page and not affect auto-centering on mobile devices. Thank you in advance.
I have tried:
@media (min-width:616px)
.sib_subscribe_form-3 {
text-align: left;
}
@media (min-width:616px)
.footer-widget-2 {
text-align: left;
}
@media (min-width:616px)
.footer-widget-3 {
text-align: right;
}
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Try this CSS:
@media (min-width:616px) {
.footer-widget-2 .widget-title {
text-align: left;
}
.footer-widget-3 {
text-align: right;
}
}That's working for mobile and desktop, though not for middle-sized screens. See images here:
https://ibb.co/LrB7RhK
https://ibb.co/TLMRTGB
https://ibb.co/ZBgbt1h
Hi there,
What happens if you increase the min-width:616px value to something like 1000px?
Great, I picked 800 and it seems to do the trick for mobile and large screens. But I think for mid-size screens, Widget 3 header & content should be left-aligned. Can you help with that, as I am not sure of the breakpoints for mobile/tablet/desktop. Thanks
Generally speaking, this is the breakpoint:
https://docs.generatepress.com/article/responsive-display/
However, tablets are tricky to deal with every tablet has different screen widths and you also need to consider landscape and portrait mode.
