[Resolved] Button Padding on Mobile

Home Forums Support [Resolved] Button Padding on Mobile

Home Forums Support Button Padding on Mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1567391
    Marc Yvan

    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

    #1567742
    Ying
    Staff
    Customer Support

    Hi Marc,

    I don’t see the css currently, please add the css in so that I can trouble shoot for you.

    Thanks!

    #1567751
    Marc Yvan

    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

    #1567779
    Ying
    Staff
    Customer Support

    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.

    #1567790
    Marc Yvan

    I had already tried that, Still not working.

    #1567814
    Ying
    Staff
    Customer Support

    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!

    #1567821
    Marc Yvan

    WOW, that simple. Thank you very much for the help 🤦

    #1567828
    Ying
    Staff
    Customer Support

    You are welcome, glad to help 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.