Mobile Spacing Help

iconicticketing
Tourist
5 0 1

Hello, 

My shopify site iconicticketing.com is displaying the widths of the buttons (ie: 'VIP UPGRADE ONLY') as not perfectly centered. It also is mushing the buttons together in the mobile version as opposed to the desktop version. Is there a way I can get just the mobile version of these buttons to break in between the first two of each section but still keep the desktop version as it currently is? 

also, for this separate page, the buttons are even worse in terms of centering themselves (text and button backgrounds) on the page only in the mobile version. 

on a completely different side note, is it possible to fade these buttons in when you first arrive at the page? I am trying to spruce up the site to have some clean animations when you first arrive. any and all input would be appreciated!

I am new to the shopify platform, so please keep this in mind lol

thanks!

iconicticketing
Tourist
5 0 1

the seperate page is this as well. just realized I did not paste the link.

https://www.iconicticketing.com/pages/anaheim

0 Likes
HardikDavra
Shopify Partner
2317 363 994

Hello @iconicticketing,

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

.btn {
margin: 10px 0px !important;
}



PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
dmwwebartisan
Shopify Partner
7292 1721 2292

@iconicticketing 

Please add the following code at the bottom of your assets/theme.scss.liquid  file.

@media only screen and (max-width:749px){
.template-page .btn {margin: 0px -23px;justify-content: center;font-size: 0.74118em;}
}

 Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
iconicticketing
Tourist
5 0 1

no luck yet. thank you for trying. If you have any other suggestions, I'm all ears!

 

Thanks

Matt

0 Likes
iconicticketing
Tourist
5 0 1

No luck thank you anyways and all other suggestions would be great! 

 

Thanks

Matt

0 Likes
Samael
New Member
2 0 0

@iconicticketing

Please add the following code at the bottom of your assets/theme.scss file.

@media only screen and (max-width:767px){
a.btn.hero__btn {

font-size: 0.8em !important;

}

}

Hope this works

Thanks.

0 Likes
Samael
New Member
2 0 0

decrease font-size a little bit i.e. 0.62em for mobile device as buttons on homepage are also not responsive.

0 Likes