Search code examples
htmlcssmedia-queriesbackground-imagemagento2

Inserting @media rule in a div element

i'm very new here and in coding, thanks for having me.

I created a block and a widget in magento 2.4 page top to display as a banner promotion, but i want a different display for desktops and different for mobile.

what i have tried:

@media (max-width: 480px) {
body {<div style="padding: 14px; text-align: center;  background-image: url('https://s1.gifyu.com/images/nivea.gif'); background-image: center center; background-image: cover; background-image: no-repeat; background-image: fixed; color: #fff; font-weight: bold; font-size: 20px; border-top: 3px solid #f28d49;">Children's Day Sale. Get 5% OFF for <a style="color: #fff; text-decoration: underline;" href="https://tucsons.ng/index.php/fashion/children.html">ALL Children's wears</a>. Shop Now! <span style="text-decoration: underline;">Children's Day 2021</span></div>
}}
@media (min-width: 481px) and (max-width: 1024px) {
body {<div style="padding: 14px; text-align: center; background-image: url('https://s1.gifyu.com/images/nivea.gif'); background-image: center center; background-image: cover; background-image: no-repeat; background-image: fixed; color: #fff; font-weight: bold; font-size: 20px; border-top: 3px solid #f28d49;">Children's Day Sale. Get 5% OFF for <a style="color: #fff; text-decoration: underline;" href="https://tucsons.ng/index.php/fashion/children.html">ALL Children's wears</a>. Shop Now! <span style="text-decoration: underline;">Children's Day 2021</span></div>
}}
@media (min-width: 1025px) {
body {<div style="padding: 14px; text-align: center;  background-image: url('https://s1.gifyu.com/images/desktop.gif'); background-image: center center; background-image: cover; background-image: no-repeat; background-image: fixed; color: #fff; font-weight: bold; font-size: 20px; border-top: 3px solid #f28d49;">Children's Day Sale. Get 5% OFF for <a style="color: #fff; text-decoration: underline;" href="https://tucsons.ng/index.php/fashion/children.html">ALL Children's wears</a>. Shop Now! <span style="text-decoration: underline;">Children's Day 2021</span></div> }}

it only appeared three times

my website = tucsons.ng

Solution

  • Although you do not have enough debugging information and this question should be closed, I looked at your site and you should be able to paste this in your widget:

    <style>
.banner {
  padding: 14px;
  text-align: center;
  background-image: url('https://s1.gifyu.com/images/nivea.gif');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  border-top: 3px solid #f28d49;
}

.banner a {
  color: #fff;
  text-decoration: underline;
}

.banner span {
  text-decoration: underline;
}

@media (min-width: 1025px) {
  .banner {
    background-image: url('https://s1.gifyu.com/images/desktop.gif');
  }
}
</style>

<div class="banner">Children's Day Sale. Get 5% OFF for <a href="https://tucsons.ng/index.php/fashion/children.html ">ALL Children's wears</a>. Shop Now! <span>Children's Day 2021</span></div>

    You don't need to paste the HTML three times. I added a class .banner to your div so we can use the CSS to target it.

    Also, it looks like nothing changed until 1025px, so I set only the background-image to change.