Writing Code for Media Query Help

Design help Custom code
1

Hi Everyone,

I am trying to write a couple media queries to show/hide a couple of different text wrappers on one of my pages. Could someone please help me see where the problem is?

Thank you!! :slight_smile:

Here is my link:

Here is the code:

@media screen and (max-width 403px); { ".div.highlight-your-gifts-text-wrapper" { display: none } } @media screen and (min-width 403px); { ".div.highlight-your-gifts-mobile-text-wrapper" { display: block } }

Here is a screenshot:

Screen Shot 2022-04-18 at 12.15.40 PM
Screen Shot 2022-04-18 at 12.15.40 PM2628Ă—1228 302 KB

2

Hi @senecabryson

Think this is what you are trying to do.

<style>
@media only screen and (max-width 403px) {
.highlight-your-gifts-text-wrapper {
display: none;
}}

@media only screen and (min-width 403px) {
.highlight-your-gifts-mobile-text-wrapper {
display: block;
}}
</style>
1 Like
3

@Smith-Cordell this code looks great, thank you!! I put this into the HTML Embed Code Editor, but it doesn’t seem to be applying the change to anything. Here is a screenshot of it in the Nav. Do you know how I can make it apply?

Screen Shot 2022-04-18 at 1.38.57 PM
Screen Shot 2022-04-18 at 1.38.57 PM1920Ă—702 63.8 KB

4

@senecabryson
Can you post a read only link so I can take a look please?

5

You will also need to set the mobile wrapper to display none on the desktop breakpoint.

1 Like
6

@Smith-Cordell Is this one not working? Mission – Seneca & Co. | Branding & Website Design in Austin, Texas I thought I sent last time, directing to the “Mission” page. Here is the main link to “Home” if that is better https://seneca-final.webflow.io

7

@Smith-Cordell I appreciate you!!

1 Like
8

@senecabryson You’re sending a link to the published page. A read-only link allows me to take a look inside your project and make changes without it saving so I can try and help you fix it. Will be much quicker to solve.

9

@Smith-Cordell I am so sorry!! Here you are.

https://preview.webflow.com/preview/seneca-final?utm_medium=preview_link&utm_source=designer&utm_content=seneca-final&preview=177342c0065cb5098716ed8bc46f6e79&pageId=62505459a525e536b848900f&workflow=preview

10

@senecabryson
Ok, I’ve figured it out. Sorry, I missed out two colons when I was editing your code before:

<style>
@media only screen and (max-width: 403px) {
.highlight-your-gifts-text-wrapper {
display: none;
}
.highlight-your-gifts-mobile-text-wrapper {
display: block;
}}
</style>

Also in the project on mobile breakpoint, you need to turn off display block for .highlight-your-gifts-mobile-text-wrapper as it will be handled by the code. Let it inherit display none from the desktop breakpoint.

1 Like
11

@Smith-Cordell You are amazing!! This solved the problem. Thank you so so much!! I appreciate it a lot.

1 Like