Resize image banner on shopify theme dawn

Store Design
, , ,
1

I would like to change the image banner width for desktop and widescreen without affecting the mobile version.

so that I have white background on the left and right of the banner instead of full width.

another problem, I now have it set to adapt to first image, which means that it appears completely on the mobile version, but as a small banner, now I would like to make it a little higher. I understand that the banner will no longer be fully visible, but if I know how to adjust it, I can see what looks best.

www.kinderschoenen-sale.nl

geentoegang90

2

To achieve the changes you’ve described, you’ll need to modify the CSS code of your Shopify theme. Here’s a general outline of what you can do:

  1. Adding White Space on Desktop and Widescreen: You want to restrict the width of the image banner and add white space on both sides. This can be achieved by setting a maximum width for the banner container and centering it within the page. You can do this by adding custom CSS rules.

  2. Adjusting Banner Height for Mobile: You want to increase the height of the banner for mobile devices to make it more visible. This can also be done via CSS by setting a different height for smaller screens.

Here's a basic example of what your CSS modifications might look like:

/* Adjusting banner width for desktop and widescreen */
@media only screen and (min-width: 1024px) {
  .banner-wrapper {
    max-width: 1200px; /* Adjust this value as needed */
    margin: 0 auto; /* Center the banner */
  }
}

/* Adding white space on the left and right of the banner */
.banner-image {
  max-width: 100%; /* Ensure image doesn't exceed container width */
}

/* Adjusting banner height for mobile */
@media only screen and (max-width: 767px) {
  .banner-wrapper {
    height: 300px; /* Adjust this value as needed */
  }
}

Replace ‘.banner-wrapper’ and ‘.banner-image’ with the appropriate classes for your Shopify theme. You may need to inspect the elements on your webpage to find the correct class names.

3

doesnt work for me