lizbeck Posted December 23, 2020 Share Posted December 23, 2020 Hi everyone! I need some help with coding. I can't find a way to center align the icons on my home page in mobile view. Thank you in advance. Link to comment
stressbunny Posted December 23, 2020 Share Posted December 23, 2020 I see everything centre aligned. Can you share a screenshot of where the problem is? Link to comment
lizbeck Posted December 23, 2020 Author Share Posted December 23, 2020 Sure! This is how it looks on my mobile also. It's more on the right side. Link to comment
stressbunny Posted December 23, 2020 Share Posted December 23, 2020 Okay. It looks like you have some CSS that sets the height of the 3 icons, which is: #block-c0976187c4866e4a353f { height: 250px; width: 350px; margin: auto; } When you're on a mobile that has width of less than 350px the icons are bigger than the screen. They are also off centre at multiple break points, e.g. 900px. Instead of fixing the width, I suggest allowing the width to auto-size & adding a max-width so they don't get too big. So the custom CSS would be: #block-c0976187c4866e4a353f, #block-512d56e19c86b1e3eb0c, #block-9e3eeb8fd2a624874a2f { width: auto; height: auto; margin: auto; max-width: 350px; } If you added the height/width CSS above, you will need to replace it with this. Link to comment
lizbeck Posted December 23, 2020 Author Share Posted December 23, 2020 Thank you!! That worked perfectly well 🙂 Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.