Row containing 2 Buttons not displaying well on small screens & mobiles - Forum | JoomShaper
Solved SP Page Builder

Row containing 2 Buttons not displaying well on small screens & mobiles

Asked by marley man 9 months ago Last activity 9 months ago

I'm designing a new website: http://72.52.156.215/~themosquitoman/
I needed a large image on this homepage with text and 2 buttons on top of it, so I added an image to a section background, and then added a heading and a row with the 2 buttons on top of the section with the background image.

Unfortunately, when I shrink down the browser to a smaller size, those buttons get squeezed together instead of displaying them like button 1, then button 2 below button 1.

Can you explain how to correct this issue on smaller screen sized please?
Thank you

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
9 months ago

Please use it inside Page Settings > Page CSS > Custom CSS

and only a new version of code.

16 more replies

Oldest first Newest first Most helpful
Paul Frankowski Senior Staff
9 months ago

Hi,

Two Quick Tips:

  1. If you used two different Button addons, you can set also Margin (top/right/bottom/left) then it will help to have space between them, also on mobile view. No CSS hacks, just basic settings.
  2. Instead of using columns and two separate addons, you could use Button Group addon (LESS IS MORE)
marley man Asked this
9 months ago

Thanks Paul, but if I use a button group add-on, I wouldn't be able to display these two buttons side by side like I'm trying to mimic this homepage with their button side by side on top of their image: https://moshield.com/

Paul Frankowski Senior Staff
9 months ago · edited

in that case use tip No 1

If you need a video guide ping me tomorrow (+10h), I am going sleep now, sorry late hour.

BTW

As I saw on moshield they used extra CSS 

@media (max-width: 767px) {
  .mos-btn-alt {
    width: 100%;
    max-width: 350px;
  }
}

to improve view on iphone. But also margin value for buttons.

marley man Asked this
9 months ago

You're awesome, will do, have a good evening!

Paul Frankowski Senior Staff
9 months ago

as 1st step, for both buttons

those.png

you can use 10px

Paul Frankowski Senior Staff
9 months ago

yes , my today setup is/was for #1

Paul Frankowski Senior Staff
9 months ago

2nd step. To make it "nice", inside internal Row add ID name (in Row settings), for example, action-buttons

info_3791_2026.jpg

Paul Frankowski Senior Staff
9 months ago · edited

3rd step, if you done 1 & 2nd as I asked.

Now we will grab an idea from moshield site.

@media screen and (max-width: 680px) {
#action-buttons  .sppb-btn {width: 100%;max-width: 320px;  display: block;}
}

as you see, this is still CSS basics. To be honest, using 3rd step (with extra margin value) you could replace first step. But it's worth to know how, and for is (1).

marley man Asked this
9 months ago

Paul, I've done all your steps so far...can you please clear your cache and let me know how these 2 buttons look on your smaller screen & Mobile? Thanks Janel
http://72.52.156.215/~themosquitoman/

marley man Asked this
9 months ago

I did 2 and 3...added the action-buttons in the Section ID and then this below that in the Custom CSS:
@media screen (max-width: 680px) {

action-buttons .sppb-btn {width: 100%;max-width: 320px;}

}

Paul Frankowski Senior Staff
9 months ago · edited

You still need to do 2 & 3 step exactly as told you.

But even now on mobile view I see 10px space between buttons.

Paul Frankowski Senior Staff
9 months ago · edited

You added ID name in wrong Section, it was screenshot with red arrow !!!

and there is missing "and" here

@media screen and (max-width: 680px) {

No morning Coffee ?? ;) please look again, and correct mistakes.

marley man Asked this
9 months ago

You're absolutely right Paul...on both counts - wrong section and not enough coffee!!

Log in to reply.