mobile responsive

Hi @castleno9!

P2 is in maintenance mode at the moment, so there aren’t any major updates planned. You could consider using a responsive version of P2 like Mercury ??

thanks @shireling for the quick reply.

i actually have mercury active right now but it does not seem to be mobile responsive! ??

any thoughts on how to remedy? https://www.castleno9.club

thank you!

Thanks for the link! I see two things happening:

footer is not responsive
When I inspect the page, it turns out that is being caused by this CSS style, which is not part of P2 or Mercury, so it’s likely part of your Additional CSS in the Customizer, or added by a plugin you’ve installed:

#header, #footer, #wrapper {
    width: 760px;
}

Because the width is set to 760px, it won’t be responsive on screens that are narrower than that. A max-width can fix it, if you need to keep that style in place:

#header, #footer, #wrapper {
    width: 760px;
    max-width: 100%;
}

The second is that the background image gets cut off on small screens – that’s actually normal ??

Background images can be set to size different ways:
https://www.w3schools.com/csSref/css3_pr_background-size.asp

This theme leaves the background size at auto, meaning it maintains it’s size and doesn’t do any scaling or cropping. This can work well for some images, but not all.

On your image, I’m guessing you’d rather it not be cropped on small screens. Let’s use a media query to change the sizing setting on smaller screens:

@media screen and ( max-width: 500px) {
    body.custom-background {
        background-size: contain;
    }
}

Setting background-size: contain; means the background should be as wide and tall as it can be, without running off the edge of the screen – so make it big, but make sure the entire image is visible ??

thanks @shireling! big improvement. i would still like the white with black text image to be stratified right but for now this will do!

I’m not sure what you mean by “stratified,” but if you tell me a bit more I’d be happy to look ??

Do you mean you want the image to be right aligned and not the full width of the screen, even on small devices?

If so, you’d want to use your media query to actually swap out the image for a smaller version that is narrower than the screen itself ??

For example, something like this:

@media screen and ( max-width: 500px) {
    body.custom-background {
        background-image: url(SMALLER IMAGE URL HERE);
    }
}

If you were thinking of something different, let me know! (or you can mark the thread as “resolved” over in the sidebar if you’re good for now)