Mobile hero image & button

[jeffreym]

I would like my hero image to be enlarged and fill the entire mobile screen and have the buy button in the same spot.

Is there a specific size I should be creating the image in or is this a coding issue?

URL: hygiadental.com
PW: angel

 

[mageplaza-cs]

Hi @jeffreym,

I am from Mageplaza - Shopify solution expert.

As I researched your store, I noticed that the image is already full-width. However, it has a white background by default. You should edit your image to match your expectations.

Could you please explain the 'Buy' button in more detail? I don’t quite understand what 'same pot' means, but I believe it can be easily achieved with some custom CSS.

I hope this is helpful to you.

Best regards.

[jeffreym]

So to start I have to create the image in a different px size?

Also, I want the picture & blue background to cover this entire 'YELLOW OUTLINED ZONE' and the buy button to be placed in the 'RED OUTLINED ZONE' as displayed in picture. 

I am not sure how to achieve this desired outcome.

Thank you for helping 

[mageplaza-cs]

Hi @jeffreym,

First of all, you should edit your image to remove the background so that it displays as desired. As mentioned, it is already set to full width.

Second, you need to edit your theme by following these steps:

1. Access the Theme Code Editor:

   • Log in to your Shopify admin.
   • Go to Online Store > Themes.
   • Find your active theme and click Actions > Edit code.

2. Locate the file:

   • Look for the file that controls the page (possibly index.html).
   • Move the .banner-button div into the .bc-spacer div.
   • Save and test the changes.

[Dan-From-Ryviu]

Hi @jeffreym 

Please add this code to Custom CSS of that section 

@media (max-with: 749px) {
.banner__media { height: calc(100vh - 300px;) }
}

[EstherBui]

Hi @jeffreym 

You can follow the instruction here :

1. Go to Shopify > Online store > theme > customize

2. Click to Settings > Custom CSS > Paste this code to the section and save.https://prnt.sc/Rl66N9K_Bjvs

@media screen and (max-width: 768px){
.banner__media.media img {
    object-fit: cover !important;
}
}

Best regards, 

Esther