How can I center a button ONLY for mobile view for my store?

[hennyqqq]

Hi there, so on desktop view my layout is fine, but I noticed when I go into mobile view, my button is not centered and my images have gotten more zoomed in?

I want to change this so that the button to enter my store is in the middle for mobile ONLY

See below:

[Guleria]

Hello @hennyqqq ,

Please share the store URL.

Thanks

[hennyqqq]

https://30skx9y16i4thzr2-85488763207.shopifypreview.com

[Made4uo-Ribe]

Hi @hennyqqq

Please, share your store URL. Thanks!

[hennyqqq]

https://rsj7pt-nw.myshopify.com/?_ab=0&_fd=0&_sc=1

Hope this helps

[Made4uo-Ribe]

Thanks for the info, it password protected.

[hennyqqq]

tusash

Sorry :))

[Made4uo-Ribe]

No worries, try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 749px){
.banner__box.content-container {
    background: transparent;
}

.banner__content.banner__content--middle-center {
    position: absolute;
    top: 50%;
    bottom: 50%;
}

.banner__media.media.banner__media-half img {
    object-fit: inherit;
}
}

• And Save.

• Result:

  

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[hennyqqq]

Ah so that’s worked thank you so much Shopify wizard!! But now the images are kind of squished together.

1. Is it possible to remove the white text above the button?

2. Can I fix this image problem? Or if not, is it possible to just have one picture show for mobile, so the picture on the right?

[hennyqqq]

Additionally, how can I adjust the pictures opacity on mobile? so the white text can be seen better

[Made4uo-Ribe]

Please, replace on this code below. Thanks!

@media only screen and (max-width: 749px){
#Banner-template--23726874231111__image_banner_XeATay > div:nth-child(1) {
    display: none;
}
    
.banner__media-half {
    width: 100%;
}
    
.banner__media.media.banner__media-half img {
    object-fit: cover;
}
    
.banner--mobile-bottom::after,
  .banner--mobile-bottom .banner__media::after {
    content: "";
    position: absolute;
    top: 0;
    background: #000;
    opacity: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display:block;
    }
.banner__box.content-container {
    background: transparent;
}

.banner__content.banner__content--middle-center {
    position: absolute;
    top: 50%;
    bottom: 50%;
}
}

And Save.

Result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[hennyqqq]

@Made4uo-Ribe hey again, thanks so much for the help.

I tried that code above but I am getting this on my mobile view;

Not too sure what I am doing wrong?

[Made4uo-Ribe]

Please, replace on this.

@media only screen and (max-width: 749px){
#Banner-template--23726874231111__image_banner_XeATay > div:nth-child(1) {
    display: none;
}
    
.banner__media-half {
    width: 100% !important;
}
    
.banner__media.media.banner__media-half img {
    object-fit: cover;
}
    
.banner--mobile-bottom::after,
  .banner--mobile-bottom .banner__media::after {
    content: "";
    position: absolute;
    top: 0;
    background: #000;
    opacity: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display:block !important;
  }
    
.banner__box.content-container {
    background: transparent;
}

.banner__content.banner__content--middle-center {
    position: absolute;
    top: 50%;
    bottom: 50%;
}
}

And Save.

Let me know the result and please mention me. Thanks!

[hennyqqq]

@Made4uo-Ribe

Thank you so much, you are amazing!

Is it possible to change the font size, JUST for mobile too?

[Made4uo-Ribe]

Which one the title or the buttons?

[hennyqqq]

For the title at this moment

[Made4uo-Ribe]

Looks like you change the password. I cant enter again.

[hennyqqq]

pw: warmfriends

sorry hahaha

[Made4uo-Ribe]

Thanks, im not sure if you like to increase or decrease but you can change the size.

Same instruction.

@media only screen and (max-width: 749px){
h2.banner__heading.inline-richtext.h2 {
    font-size: 30px;
}
}

And Save.

Result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[hennyqqq]

I really appreciate the help.

I now have two questions hahaha

1. How can I change the size of the button (device only)?
2. Can I change my logo size (device only)?