• itsjustjessa

    (@itsjustjessa)


    When I collapse my site down to mobile my images don’t stack consistently. I want it to go text > image > text > image… and right now it’s more like text > image > image > text… how do I fix this?

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    Use a CSS media query to set the applicable display properties from grid to block for appropriate device widths. This nullifies the various grid properties that accomplish the right/left positioning and reverts the layout to normal rendering flow.

    Michael Arestad

    (@michael-arestad)

    @bcworkz is correct. To elaborate, you will want to add a bit of CSS code. You can do this by going to the Customize view (link is in the WordPress sidebar). You will then see a menu item on the left called Additional CSS. Open that up to reveal a little text editor to add some odds and ends CSS when needed.

    I believe the following sets of CSS should do the trick with a few caveats.

    The following code will resolve the issue across your entire site for that particular block type. I don’t really see a downside to this, but if you see something break on another page, you might try one of the other examples I am providing.

    @media (max-width: 600px) {
    	.wp-block-media-text {
    		display: block;
    	}
    }

    The following two sets are a little more focused in their target. This next bit of code targets that particular block, but only on blog posts.

    @media (max-width: 600px) {
    	.single-post .wp-block-media-text {
    		display: block;
    	}
    }

    This last one only targets the specific page you linked.

    @media (max-width: 600px) {
    	.postid-9267 .wp-block-media-text {
    		display: block;
    	}
    }
    Michael Arestad

    (@michael-arestad)

    I made a similar recommendation for the WordPress block to function like this by default. It’s possible that, in the future, you will be able to get the desired result with a setting or just out of the box. If you’re interested, here is the issue: https://github.com/WordPress/gutenberg/issues/14283

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile friendly layout issue’ is closed to new replies.