Inserting @media rule in a div element

Question

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

Welcome to Stack Overflow! `@media` queries work in CSS files, not with HTML markup like you have. You can't change HTML. — disinfor, May 31 '21 at 15:01
so, what can i do to get my desired results without touching css is there nothing i can input .... — Frank Tobi, May 31 '21 at 15:23

disinfor · Accepted Answer · 2021-05-31T17:33:15.717

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.

wow!! thanks @disinfor....i will use this information to learn how to better present my goal this is my goal or what i wnat to achieve sir = https://www.konga.com/ — Frank Tobi, May 31 '21 at 16:08
and i think it also repeats throughout...the backgrou-repeat does not really work — Frank Tobi, May 31 '21 at 16:19
@FrankTobi I fixed the code. You were using `background-image` for all of your background properties. — disinfor, May 31 '21 at 17:33

Inserting @media rule in a div element

1 Answers1