Change the default setting of full width (only for desktop) of specific section (Dawn Theme)

Store Design
1

Hello Community,

Tis should be simple but i’m not getting there. I’ve done an infographic and chose the image banner to display it. On mobile it is perfect, but on desktop it’s huge. So I already searched some type of solution but without success. Can someone help me and tell me how to target this specific banner, without affecting the other image banners on my shop (or if the process is similar, to any other specific section) and define the width % on desktop devices?

This is the specific page with the infographic (image banner section) that i want to target.

https://wildweave.co/pages/sustainability

Thanks in advance to anyone that can help me to achieve a solution.

Regards,

Vitor Hugo

2

  1. Identify the unique class or ID: Inspect the banner element on your website using your browser’s developer tools. Look for a unique class or ID assigned to the banner image element. For example, it might be something like .infographic-banner or #infographic-banner.

  2. Add custom CSS: Once you have identified the unique class or ID, you can add custom CSS to specifically target and adjust the width of that banner on desktop devices. Open your theme’s CSS file (usually named something like theme.scss.liquid or styles.scss.liquid) and add the following CSS code:

@media (min-width: 768px) {
  .infographic-banner {
    width: 70%; /* Adjust the percentage as needed */
    max-width: none; /* Remove any maximum width constraints if necessary */
  }
}
3

Hello @NomtechSolution ,

Thank you very much for your input. I’ve decided to insert the code directly on the section’s custom css, and it worked but aligned to the left.

So in order to center the image i added:

margin-left: auto;
margin-right: auto;

Thanks for your quick and handy response.

All the best,

Vitor Hugo