[Support request] style footer on mobile

[John MacKenzie]

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!

[Tom]

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/

[John MacKenzie]

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.

[Ying]

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 🙂

[Author]

Posts