Archived topic

style footer on mobile

3 replies · Started by John MacKenzie on December 18, 2020

Viewing posts 1–4 of 4

December 18, 2020 at 9:20 pm #1586670

having trouble getting footer just right on mobile the first widget has an image and text, i want the text to still say BESIDE the image but it snaps below it (and thus have the image change responsively smaller.)

also some padding issues in the in between sizes when scaling down.

thanks!

December 19, 2020 at 12:43 pm #1587440

Hi there,

You could try something like this:

@media (max-width: 768px) {
    .footer-widget-1 .alignleft {
        float: left;
        margin-right: 1.5em;
    }
}

Alternatively, you can use a Block Element along with GenerateBlocks to build the entire footer: https://docs.generatepress.com/article/block-element-overview/

December 30, 2020 at 11:27 am #1599952

thanks! hmm didnt know i could just build the footer with elements. already put too much time on this one so hopefully we can just solve this way. This spaces the image all the way over to the left but i just want it right beside the text?

same issue with the recent posts widget the image show sup all the way on the left and the title looks weird.

December 31, 2020 at 2:10 pm #1601111

Hi John,

Just to make sure that you want the image in footer widget move to the right next the text?

If so, try to replace Tom's css with this:

@media (max-width: 768px) {
/* for footer-widget-1 */
    .footer-widget-1 .alignleft {
        float: left;
        margin-left: 1.5em;
        margin-right: 0;
    }

/* for footer-widget-2 */
    .footer-widget-2 .attachment-thumbnail.size-thumbnail.wp-post-image {
        margin-left: 1.5em;
        margin-right: 0;
    }
}

Let me know :)

This archived topic is closed to new replies.

Start building better websites today.