Archived topic
Alignment Issue on Mobile & Portrait Tablet
5 replies · Started by Mary Pearson on August 20, 2021
On my website at https://bowmanvillegolf.ca/ I have two buttons in the first section. All looks fine except on mobile and portrait tablet. In those cases the alignment is shifted to the right.
I am currently using Lightweight Grid Columns for the buttons, but have also tried it using Responsive Tablepress, and the results are the same.
I have done all the pre-check things like plugin conflict, caching plugin, deleted my custom CSS and functions.php files etc.
I have tried moving the whole section from the first to the third, with no change. It looks OK in Customizer when you size the window to mobile but on my phone and in responsinator.com, the buttons are shifted to the right.
I notice also that my slider in the header, and the image in the section below are also shifted to the right, but not to the same extent.
Would appreciate some help. Many thanks!
Hi Mary,
Looks like this CSS is causing the issue:
width: 50% !important;
https://www.screencast.com/t/lnF2zAYf
It's likely from a button plugin.
Also I would highly recommend using the block editor with Geneareblocks to build the page.
Sections and LGC will both no longer be supported and updated.
Thank you. I tried adding
@media (max-width: 768px) {
.mb-center.maxbutton-4-center .maxbutton-4-container.mb-container, .mb-center.maxbutton-5-center .maxbutton-5-container.mb-container {
width: 100% !important;}
}but nothing changed.
You would need to make the CSS selectors more specific as the plugin is already using !important in the CSS:
https://stackoverflow.com/questions/11178673/how-to-override-important
As Ying suggested, the best solution here is to convert the page into the block editor with GenerateBlocks while there isn't a lot of content in it.
You would be able to achieve the exact same layout without an extra buttons plugin and custom CSS.
Thank you for your suggestion re using blocks. This site is really old and I have been avoiding using blocks because I don't like them. I have played around a little with them now, as it seems inevitable that I'm going to have to start using them, but I really don't want to "practice" on this very busy website. I obviously have much to learn, and my clients would not be happy if I screw it up.
I just put the buttons in a slider and all is good now.
Thank you again.
No problem :)
