Reducing the size of blocks on home page

Store Design
, ,
1

Hi! I am using the Aurora theme.

At the moment the blocks on my home page seem excessively large. They do not fit on the screen fully so you have to scroll a little to see the whole image. See image where the top of the rackets does not fit on the screen

Is there a way to reduce the height of the blocks? If I reduce the zoom on my screen to 75% it is a better fit.

Screenshot 2025-01-07 101014.png
Screenshot 2025-01-07 101014.png1915Ă—882 161 KB

1 Like
2

Hi @sammyf1509

Please, share your store URL. Thanks!

3

Hi! Thanks for your reply. It’s www.up4padel.com but I don’t have the website live yet because of this problem.

4

Thanks for the info, its password protected.

5

Hello, I have removed the password. If you could have a look id be very grateful.

Many thanks

6

I think the mobile version is worse.

7

Hi! Ann here from Aurora theme support. Please note that all the banner sections in the theme have two settings at the top - Desktop ratio and Mobile ratio.

These settings control the height and width of your banner on different devices. Once you’ve chosen the ratio, you can crop or resize the image that goes into the section. Note that for all banner sections, you can also choose different desktop and mobile images.

AnnAshen_0-1736772967629.png
AnnAshen_0-1736772967629.png288Ă—298 11.1 KB

8

Thanks for the info, 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:
.split-image-banner__container img, 
.image-banner__container img{
    object-fit: fill;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!