[Resolved] Layout Has Changed

[Andre]

Hi! I have been having some issues with my website and I hope someone can help. Some of the text alignment and arrow elements have moved on the front page. I had the same issue viewing on mobile and it’s seem to have rectified itself now. I have not done anything to it! For some reason issues have been rectifying themselves hours later. I have not changed or altered anything coding apart from disabling plugins, clearing cache, etc in an attempt to fix the issue. I contacted my hosting and they suggested there is an issue with the theme. (See attachment) Please can you look at the screen shot and see what you can do your end. I have included my login and some screen shots. Thank you so much.

[Leo]

Hi there,

This has nothing to do with the theme as you’ve custom coded that section with HTML and CSS.

The issue is because you are setting the image/icon to float left in your CSS – this means that the text wraps around the image when it gets too long or when the screensize gets smaller.

To fix this, the icon and headings should be in their own columns:
https://www.screencast.com/t/M3uriXEpIbC

I would recommend using the grid, container and headlings blocks from GenerateBlocks to recreate the layout you are going for – that will allow you to have much more control over how the columns/headings work:
https://wordpress.org/plugins/generateblocks/
https://docs.generateblocks.com/article/container-overview/
https://docs.generateblocks.com/article/grid-overview/
https://docs.generateblocks.com/article/headline-overview/

[Andre]

Hi Leo, thanks for you’re advice. I’ve activated and used Generateblocks to implement the changes you suggested and I’m having issues floating the tickboxes to the left of the headlines so it wraps in mobile view.

I’ve created three grids and the first grid has the image and second has the headline. Everything is fine until it gets down to mobile sizes and the first grid stack on top the second. I’ve tried giving each grid a class to manipulate it but nothing works.

I’ve tried float, align, display, flexbox but I can’t seem to align the tickboxes to the left in mobile view and make the text wrap neatly. Any help please?

[Kyungsoo Choi]

wrong spot

[Andre]

Nevermind:) Figured it out. There was a code floating the images to the right for some reason.

[Leo]

Glad to hear 🙂

[Author]

Posts