Trying to get a @media query to affect an image on Mobile

[WaveLynx]

I need to slide my overlapped image down on Mobile. Isn’t this the best way to do it? The desktop has a margin-top = -400 that pulls it up and over the top section.

Thanks!

@media (max-width:480px) {
.e1069-12 .x-image {
margin-top: 0px;
}
}

[marc_a]

Hi @richexperiences,

Thanks for reaching out.

I’ve checked your website and I couldn’t find the layout you showed in your screenshot, would you mind sharing the actual link to us so that we can better help you with your concern and your CSS code media query should work because you are doing it right.

Hope that helps.

Thank you.

[WaveLynx]

Sure. Sorry. https://wavelynxtech.com/products/mypass-mobile-credentials/

[marc_a]

Hi @richexperiences,

I already found the problem with your CSS media query code, please copy the enhance css code below to make it work.

@media (max-width:480px) {
.e1069-12.x-image {
margin-top: 0px;
}
} 

In your post, there is a space between .e1069-12 and .x-imageand they shouldn’t have any space between them in your setup.

The code should work provided it’s copied completely. If that doesn’t work on your end, that means there’s an error with other custom codes you’ve added to your site. For that case, please consult with a 3rd party developer because providing custom code or custom development is outside the scope of our theme support.

Hope that helps.

Thank you.

[WaveLynx]

Hello - Thank you. So, this is the correct way to affect specific elements at specific viewport sizes then? I want to make sure I am trying the correct approach. I get it. The code doesn’t work, but if you are saying this is the correct approach then i will continue to debug.

Please confirm.

Thanks!

[nabeel]

Hey @richexperiences,

An alternative approach would be to add two images (one for the desktop that has -400px margin top and one for the mobile devices where there would be no margin top) then you can show hide images based on the screen sizes (see https://theme.co/docs/hide-or-show-content-by-device-size)

Custom CSS always create issues sooner or later so it’s best to avoid the custom CSS and use native features. Hope this helps!

[WaveLynx]

Hello Nabeel - Thanks very much! Yes, i was wondering about this. At first I thought that I’d need to duplicate the entire first section with the image, download buttons, and background and turn on the entire section depending on breakpoint. So, I didn’t go there. Now I see what you mean. I’ll try this!

BTW - It’s really odd. My code snippet does work… I can display:none and it hides on SM breakpoint sizes, but the margin-top:o; just doesn’t work. I can see how maybe there is a collision with some other custom CSS, though I’ve never intentionally overridden the styling for the specific element before.

Thanks again. I’ll post the results.

[WaveLynx]

So, the duplicate image method worked of course.

I would love and answer to these questions.

1. I still have a lot of refinements to make for mobile. So, given that I can’t select a breakpoint View AND use the GUI to modify and element’s padding for example and have it apply to that breakpoint only… I must apply custom CSS in all cases other than column layouts, correct?

2. Do I Have to add a custom class name to an element AND add the breakpoint code to make the changes I need, right? OR, can I just add the CSS and try to apply it to the Pro class names, etc?

thank you! I really want to confirm once and for all that I CAN’T use the Layout Inspector to make changes while in a certain breakpoint view. It would be SOOO helpful if this were the case.

[friech]

Hi Richard,

1.) Yes, that is correct. But please keep in mind to avoid custom CSS if possible as that can create conflict and become hard to troubleshoot when accumulated.

2.) Do not use the generated element’s class name (e.g. .e1069-12) because that is dynamic, meaning it can change, so when that class numbers change your CSS code becomes invalid.

You can use the Element CSS area intstead.

@richexperiences

Do I Have to add a custom class name to an element AND add the breakpoint code to make the changes I need, right?

Yes, that is correct. But please keep in mind about the CSS Specificity, because if the default element’s styling has a stronger (more specific) CSS selector than your class selector, then your custom CSS will not able to overwrite the default styling.

P.S.

You have a typo on that screenshot, please do not append period [.] when applying a class to an element. Append the period when you use that class as a selector on your custom CSS.

Cheers!