How to I change the alignment of the image and text on my wordpress site?

Question

I have a wordpress site dishingup.com and am having issues with the alignment on tablet and mobile

Here it is on mobile:

And here it is on tablet

I have tried adding the following CSS in WordPress Customize

@media only screen and (max-width: 767px) {
    figure.alignleft, img.alignleft, figure.alignright, img.alignright {
        float:none;
    }
}

But feel I must be missing something. Ideally I just want the text to be below the image on mobile and tablet.

Thanks in advance.

Answer 1

The custom CSS code you added for desktop mode is affecting the elements on smaller devices and you need to override it:

Most likely, adding this to your CSS will help:

.list-category li {
  display: flex;
}
@media(max-width: 767px) {
  .list-category li {
    flex-direction: column;      
  }
  .list-category li > a {
    margin: 0 auto;
  }
  .list-category li .custom-content {
    width: auto;
    margin: 20px;
    padding-left: 0;
  }
}

If you don't want the images centered, remove the margin:0 auto rule.