I've been trying to set background to red and top margin only for the second CTA button in the mobile screen with the @media query as below.
@media screen and (max-width: 640px) {
.send-submit-look-row:nth-child(2) .send-submit-look-col .send-submit-look-cta {
background: red;
margin-top: 1rem;
}
}
HTML:
<div class="send-submit-look">
<div class="wrap-x">
<div class="inside">
<div class="row send-submit-look-row">
<div class="col col-xs-12 col-md-4 send-submit-look-col">
<picture>
<source media="(max-width: 360px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-360x226.png">
<source media="(max-width: 668px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-640x402.png">
<source media="(max-width: 1024px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-1024x643.png">
<source srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-1500x942.png">
<img src="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-1500x942.png" alt="">
</picture>
<div class="icon-title">SENDING A FEW GIFTS ONLINE?</div>
<div class="icon-description" style="height: 95px;">Shop & checkout online.
Easily ship to multiple addresses online.
Seamlessly add logos.
</div>
<div class="center-xs send-submit-look-cta">
<a href="http://shop.packedwithpurpose.gifts/?__hstc=198200880.4de93445cbe9490550807da2605860ed.1633498012520.1661798674243.1661831074692.341&__hssc=198200880.20.1661831074692&__hsfp=3731934112" class="btn cta-btn-purple" role="button" target="" title="Shop Now">
Shop Now </a>
</div>
</div>
<div class="col col-xs-12 col-md-4 send-submit-look-col">
<picture>
<source media="(max-width: 360px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-360x226.png">
<source media="(max-width: 668px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-640x402.png">
<source media="(max-width: 1024px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-1024x643.png">
<source srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-1500x942.png">
<img src="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-1500x942.png" alt="">
</picture>
<div class="icon-title">SUBMITTING A LARGE ORDER?</div>
<div class="icon-description" style="height: 95px;">Personalize your business gifts.
Add your logo to the box and message card.
Bulk-ship to one address or drop-ship to 10,000+</div>
<div class="center-xs send-submit-look-cta">
<a href="http://packedwithpurpose.gifts/submit-my-order?__hstc=198200880.4de93445cbe9490550807da2605860ed.1633498012520.1661798674243.1661831074692.341&__hssc=198200880.20.1661831074692&__hsfp=3731934112" class="btn cta-btn-purple" role="button" target="" title="Order Here">
Order Here </a>
</div>
</div>
<div class="col col-xs-12 col-md-4 send-submit-look-col">
<picture>
<source media="(max-width: 360px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-360x226.png">
<source media="(max-width: 668px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-640x402.png">
<source media="(max-width: 1024px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-1024x644.png">
<source srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-1500x943.png">
<img src="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-1500x943.png" alt="">
</picture>
<div class="icon-title">LOOKING TO MAKE IT MEMORABLE?</div>
<div class="icon-description" style="height: 95px;">Customize 50+ business gifts.
Utilize our Address Collection Service.
Include Branded Products.</div>
<div class="center-xs send-submit-look-cta">
<a href="http://packedwithpurpose.gifts/gift-concierge?__hstc=198200880.4de93445cbe9490550807da2605860ed.1633498012520.1661798674243.1661831074692.341&__hssc=198200880.20.1661831074692&__hsfp=3731934112" class="btn cta-btn-purple" role="button" target="" title="Connect with an Expert">
Connect with an Expert </a>
</div>
</div>
</div>
</div>
</div>
</div>
It instead of doing that has increased the space between all three buttons and the text above above them. Here is the page
Image below shows where I want to apply this CSS.
My Answer:
The `nth-child()` selector in CSS is used to select elements based on their position within a parent element. When used in a media query, it can be used to apply different styles to elements based on their position in the parent element, depending on the screen size or device.
For example, you can use the `nth-child()` selector in a media query to apply different styles to every second element in a list on larger screens, but not on smaller screens. Here's an example:
css
@media screen and (min-width: 768px) {
ul li:nth-child(2n) {
background-color: lightblue;
}
}
In this example, the background color of every second `li` element in a `ul` list will be changed to light blue on screens with a minimum width of 768px.
You can also combine the `nth-child()` selector with other selectors or pseudo-classes to create more complex styling rules based on the position of elements within a parent element.
Overall, using the `nth-child()` selector in a media query allows you to create responsive designs that adapt to different screen sizes and devices by applying specific styles to elements based on their position within a parent element.
Rate this post
4 of 5 based on 8195 votesComments