Archived topic
Button Padding on Mobile
7 replies · Started by Marc Yvan on December 4, 2020
Hi,
I want to have smaller buttons on mobile for my page hero.
Here is the code for my button in Elements:
class="button" href ="#"
I tried to change the padding with this code:
.page-hero .button {
padding: 50px 100px; (Exaggerated values for testing purposes)
}
}
This will work for desktop and tablet view mode, but it does not change in Mobile view.
What could be causing this issue ? Sorry if this is a basic question, but I am a beginner and I could not find the answer in the forum.
Thank you
Hi Marc,
I don't see the css currently, please add the css in so that I can trouble shoot for you.
Thanks!
Hi Ying,
You want me to share to whole code from all.css in /assets/css/ folder ?
Once again sorry, I am quite new to this. Else if I remove the under construction mode, would you be able to inspect the code ?
Thanks again for your time
Try this css, it should reduce the size of the button in the page hero on mobile view.
@media (max-width: 768px) {
.page-hero .button {
padding: 10px 10px;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Please leave the css in even if it doesn't work, so I can see why it's not working.
I had already tried that, Still not working.
Your css is missing a } after this part:
@media (min-width: 769px) {
.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 15px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}Simply add a } in the end of this part will solve the problem :)
Let me know!
WOW, that simple. Thank you very much for the help 🤦
You are welcome, glad to help :)
