Home Forums Weaver Xtreme Theme home page buttons

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #64451
    merlojh
    Participant

    On this website https://soluneem.com/ there are three buttons color coral near the bottom of the page in mobile view they stack on top of each other? Can this be fixed so they don’t? John

    #64452
    scrambler
    Moderator

    Site is in maintenance mode…

    #64457
    merlojh
    Participant

    You are right forgot to take it of now you can check John

    #64459
    scrambler
    Moderator

    You need to add and id to the div containing the 3 columns

    <div id="mybuttons">

    Then add the rule below to override the CSS that turns it into 2 columns on mobile

    #mybuttons .content-3-col {width:33.3%;padding:0 5px;clear:none !important;font-size:80%;}

    You can tweak values as you see fit

    #64461
    merlojh
    Participant

    Thanks you for the help! John

    #64471
    merlojh
    Participant

    This does not work in mobile view buttons look distorted? John

    #64472
    scrambler
    Moderator

    If you mean they break on two lines, this is because the text is too big to fit the three of them side by side.

    You need to reduce the font size on mobile, so you can add a mobile rule to do that

    .is-mobile #mybuttons .content-3-col {font-size:80%;}

    #64477
    merlojh
    Participant

    I reduced the font size to 50% and it still is not looking good? When I size it on my computer it look fine but on my phone it does not? I have a Samsung. I would have to make it really small to work? John

    #64479
    scrambler
    Moderator

    I would need to see what it look like, but it does not hurt to try, and you can use a different rule for phones using .is-phone class

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