Edit container in image banner (Dawn 9.0). Remove corner-radius in mobile version.

Store Design
,

Topic summary

A user is attempting to customize the Dawn 9.0 theme’s image banner by applying different styles to desktop and mobile versions. They successfully added border-radius and box-shadow to the .banner__box element on desktop but cannot remove these effects on mobile.

Technical Issue:

  • The mobile media query (@media only screen and (max-width: 749px)) isn’t overriding the desktop styles
  • Initial code lacked !important declarations in the media query

Solutions Proposed:

  1. Add !important to mobile CSS properties (border-radius, box-shadow, opacity) to override desktop declarations
  2. Alternative approach: Apply border-radius: 0px !important to .content-container in base.css

Current Status:
The issue remains unresolved after initial fix attempts. Community members requested the store URL and password to diagnose the problem directly, suggesting there may be additional CSS conflicts or specificity issues preventing the mobile override from working.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Screenshot 2023-05-25 182802.png
Screenshot 2023-05-25 182802.png542×357 13.4 KB

I used the code below to transform the banner_box in desktop version of the website. I would like to remove the border-radius and the other settings of the banner_box in mobile version. Unfortunately, the code does not work. I have inserted the code above in the file section-image-banner.css

Does anyone know what the error is and can help me?

.banner__box {
  border-radius: 21px !important;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
  opacity: 0.9; 
}

@media only screen and (max-width: 749px) {
  .banner__box {
    border-radius: none;
    box-shadow: none;
    opacity: none;
  }
}
2

@Roxolot , all cool in the code. You just have to add !important; in a media query. Because you have added !important for border-radius. to override the !important property in mobile view you have to override that in media query as well with !important. Please refer below code for a better idea.

.banner__box {
  border-radius: 21px !important;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
  opacity: 0.9; 
}

@media only screen and (max-width: 749px) {
  .banner__box {
    border-radius: none !important;
    box-shadow: none;
    opacity: none;
  }
}
3

Thank you for your respones. I have changed the code, but it still does not work.

.banner__box {
  border-radius: 21px !important;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); 
}

@media only screen and (max-width: 749px) {
  .banner__box {
    border-radius: none !important;
    box-shadow: none;
  }
}

Do you have any other ideas?

4

Could you please share your store URL? So, I can check and let you know what the issue is.

Also, try the below updated CSS.

.banner__box {
  border-radius: 21px !important;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); 
}

@mediamax-width: 749px) {
  .banner__box {
    border-radius: none !important;
    box-shadow: none;
  }
}
5

Hi @Roxolot ,

Would you mind to share your URL website with password?

Thanks!

6

Hello @Roxolot

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.content-container {
    border-radius: 0px !important;
}