-
Posts
-
The Grid One theme does not appear to be fully responsive on tablet and mobile.
Whenever I have a primary and secondary button side by side in desktop view, they are overalid on top of one another in mobile and tablet view. This is the case with one of the existing templates provided for the theme, when I attempt to add my own CSS code, and when I create the two buttons using separate columns. I also use the Diced theme and don’t have these issues with it, so it seems to be a Grid One issue. I’ve seen that other people have had the same issue as me.
Can anyone advise on what I can do? I know enough about CSS to be able to figure out where to add bits of code but not enough to know how to make changes myself. Are there any other workarounds?
Thank you for question and our team is happy to help in any way we can.
It looks like you are seeing this in the GridOne theme due to some of the default styling rules in the theme related to the button-primary and button-secondary CSS classes.
By default those buttons have the display: block; rule applied to them and then at screen sizes larger than 768px (tablets and desktops) it changes to display: inline;. That is why the buttons are stacked on mobile and display side by side everywhere else.
If you wanted to use CSS to change the positioning behavior of those buttons then you could use something like this:
.button-primary, .button-secondary { display: inline; }That will overwrite the setting for mobile devices and allow those buttons to show as expected. I hope that gibe you the design you are looking for and please let us know if there is anything else that we can do to help.
Thanks for the response, but I’m afraid this doesn’t solve the problem. In fact, it makes things slightly worse as one set of primary/secondary buttons that was displaying well changed to become more crowded.
However, with some more trial and error I’ve managed to find a workaround.
Thank you for following up!
Can you please share the workaround you were able to arrive to?
- The topic ‘Grid One theme: Primary + secondary buttons do not display properly on mobile/tablet view’ is closed to new replies.
