Button formatting

Hi 

Please can anyone help with button formatting?

I would like two buttons side-by-side on my homepage. I have created the buttons and they look fine on all desktop sizes, but when I check anything smaller (iPad pro and smaller) they start to overlap and they are not the same size/aspect. One is a primary, one is tertiary, but I have checked the button settings and they are the same.

Many thanks in advance.

Hi,

Can you share link to homepage?

Hi

https://www.alfredthomasproperty.co.uk/

Thank you

1 hour ago, HATP said:

Hi

https://www.alfredthomasproperty.co.uk/

Thank you

You want to prevent overlap or make them stacked like as mobile?

Hi.

I would like to have the buttons side-by-side on all screen sizes and also the same size and shape as each other. (I guess ideally they would probably be slightly smaller on mobile vs desktop too).

I would also like to prevent the overlap which occurs at screen sizes of 1000px (wide) and less.... although they don't overlap for every screen less than 1000px e.g. they overlap for iPad at 768 but not iPhone 12 at 390.

Try adding to Design > Custom CSS

@media screen and (max-width:1000px) and (min-width:768px) {
.fe-block-e648b578632a1f6660d0 {
    grid-column-start: 15 !important;
    grid-column-end: 22 !important;
}
}

Hi, 

Many thanks for this. I'm really sorry but it hasn't seemed to work.

40 minutes ago, HATP said:

Hi, 

Many thanks for this. I'm really sorry but it hasn't seemed to work.

Can you keep the code in CSS box? We will check it again

Hi, 

Yeah, it's in there. (In the Custom CSS box, in the Design section).

22 hours ago, HATP said:

Hi, 

Yeah, it's in there. (In the Custom CSS box, in the Design section).

 

I see it worked here, from screen sizes 768px to 1000px

If you have problem with other sizes, just adjust these number

Hi, 

Thank you ever so much - that CSS has put some space between the two buttons.

However, the positioning is skewed to the right on iPad. I don't understand this, because when I look at the positioning of the buttons on the grid they are equal distances from the middle...?

Also, the two buttons are different height sizes on iPad Pro. The right-hand button is fatter. Is this because the text has wrapped onto two lines? If so, is it possible to alter the padding within the button so this doesn't happen? I can't see a way to do it in the button settings. 

Lastly, I have tried to stack the buttons on mobile now because they were not sitting right side-by-side. However, I think it would be better to remove the lower button from mobile view altogether. Is this possible?

Hi, 

Thank you ever so much - that CSS has put some space between the two buttons.

However, the positioning is skewed to the right on iPad. I don't understand this, because when I look at the positioning of the buttons on the grid they are equal distances from the middle...?

Also, the two buttons are different height sizes on iPad Pro. The right-hand button is fatter. Is this because the text has wrapped onto two lines? If so, is it possible to alter the padding within the button so this doesn't happen? I can't see a way to do it in the button settings. 

Lastly, I have tried to stack the buttons on mobile now because they were not sitting right side-by-side. However, I think it would be better to remove the lower button from mobile view altogether. Is this possible?

Sorry, missing your comment. If you still need help, just let me know, I will check it again