Mobile view for BUTTONS is wrong CSS (no margin or alignment)

  • wordmax

    (@wordmax)


    3 years, 7 months ago

    Use Gutenberg blocks to add “buttons” block, create 2 buttons, block settings to center justify and wrap line ok. Looks fine on larger laptop screen but on mobile phone screen the buttons are stacked on top of each other with no space in between and they are also aligned to the left. It looks pretty bad.

    See screenshot of mobile phone view:

    View post on imgur.com

    Is this a bug in the latest theme version update? I thought that buttons CSS was working ok before looking good for all screen sizes.

    Please advise.

    Thanks

    • This topic was modified 3 years, 7 months ago by wordmax.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Shahin

    (@skalanter)

    3 years, 7 months ago

    Hello @wordmax,

    Could you please share a live URL from your issue?

    Also, you can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
    https://developers.google.com/web/tools/chrome-devtools/
    https://developer.mozilla.org/en-US/docs/Tools
    CSS Tutorial: https://www.w3schools.com/css/

    And for responsive sizes, put your CSS on custom screen size:

    @media only screen and (max-width: 480px) {
    /* put your custom CSS here*/
}

    Or use between sizes:

    @media (max-width: 960px) and (min-width: 481px){
    /* put your custom CSS here */
}

    For more information about media queries, please read this article:
    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Best Regards

    Thread Starter wordmax

    (@wordmax)

    3 years, 7 months ago

    Yes, am experienced with CSS. Before latest WordPress core update and theme update the buttons worked as expected. Now, the Gutenberg block for buttons has no effect when applying the horizontal center align option and in mobile view the buttons are stacked on top of eachother with no vertical space in between.

    I would show you a live url but I won’t because I fixed it over-riding the CSS and don’t want my live site to look bad.

    Here is the applied CCS over ride that fixed button CSS issue in the custom CSS for theme in the wp admin:

    .wp-block-buttons {
	text-align:center;
}
.wp-block-buttons a:hover {
	color:#7ae4ff !important;
}
.wp-block-button {
	margin:5px !important;
}

    Maybe you could check with other users and test to make sure it’s not just me having issue. Thanks

    • This reply was modified 3 years, 7 months ago by wordmax.
    Shahin

    (@skalanter)

    3 years, 7 months ago

    Hello @wordmax,

    The CSS you wrote is very general CSS which affects all WordPress buttons. I fully examined the issue you have raised on this topic and could not see it on my end.

    If your issue persists, please help us to reproduce it. So please let us know how we can replicate your steps to arrive at the issue on a fresh WordPress installation.

    You can upload your files to one of the following online services:
    https://postimages.org
    https://imgbb.com
    https://loom.com
    https://drive.google.com

    Thank you,
    Best Regards

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Mobile view for BUTTONS is wrong CSS (no margin or alignment)’ is closed to new replies.