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

[Roxolot]

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;
  }
}

[Akibhusen]

@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;
  }
}

[Roxolot]

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?

[Akibhusen]

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;
  }
}

[Made4uo-Ribe]

Hi @Roxolot ,

Would you mind to share your URL website with password? 

Thanks!

[oscprofessional]

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;
}