Cut-off & non-responsive photos + text

[linghuchong]

Hey guys, I’ve noticed that my photos + some of my text aren’t responsive at all for all of the different screen sizes (980px, 768px, 481px–> all of them)

Using Ethos site-wide. But the template page is imported from Integrity 1.

Here’s my site: www.thecounterstory.com

For example here’s what’s cut-off:

What does work:
–The text that I just manually entered for mobile.
–Photos that I just added to the original template and its timeline section element.

But anything I tinkered around with (e.g. formatting, playing with margins or paddings), is completely non-responsive. I know I can add/revise everything manually on mobile, but would rather save as much elbow grease as possible–especially since I’ve used this page template for many other pages. Thanks!

[rad]

Hi there,

Thanks for writing in.

That’s what happens when you apply negative margins to your element. It will not reset to 0 just because it’s viewed on the smaller device. Please remove the negative margin, or simply use custom CSS to apply your negative margins and target the desktop devices only. Example is adding this CSS to your global custom CSS,

@media ( min-width: 980px ) {

.negative_margin_02 {
    margin: 0em 0em 0em -2.0em !important;
}

}

Then simply inspect your text element and go to its customize section and add negative_margin_02 to CSS field.

Thanks!

[linghuchong]

Ok, I’ve followed your suggestions, beginning by resetting margins to 0. That fixes the mobile side.
But the CSS isn’t customizing the negative margins for the desktop devices (980px or 1200px).

I’m admittedly a newbie CSS, but I think I’ve followed your instructions:
https://cl.ly/1o0x320W2v3D (global CSS for 980px)
https://cl.ly/0D3Q0c3R0217 (in-line CSS for column)

But it’s not working…What am I missing?

[paul.r]

Hi,

You need to add it in the class field not in inline CSS

[linghuchong]

Ahhh…bloody heck, of course, that makes sense. *facepalm. Thanks man.

[paul.r]

You’re welcome!