Remove margin classes for text on mobile only

Support
#1

So as the title said,

I have linked a video in the description to explain my problem. find it in secure note.

#2

Hi there,

Please add a class to the text element then add this code in the custom CSS (assuming that the class you added to the text element is no-margin-mobile )

@media (max-width: 480px) {
    .no-margin-mobile {
        margin-left: 0 !important;
        margin-right: 0 !important;        
    }
}

Hope this helps.

#3

Hm, now it seems to work on mobile but is till not looking well for other dimensions (tablet, ect)
I’m wondering, is there a better way to make the page content width smaller for 1 page then using margin left and right as I have done?

If not, here is still a pic of how it looks now. (still too small)

#4

Hi There,

Please update the previous CSS to this:

@media (max-width: 979px) {
    .no-margin-mobile {
        margin-left: 0 !important;
        margin-right: 0 !important;        
    }
}

Let us know how it goes!

#5

Still have problems.

Tried something different, instead of putting the css on text I put it on the section, see vid:

https://screencast-o-matic.com/watch/cFVbFfobo9

#6

Hi there,

Would you mind providing the link to the page that you are working on so that we can check it?

Thank you.

#7

Yes, see secure note

#8

Hi there,

I have just checked the page and the classes and the media query are both not added to the section and the custom CSS panel.

Kindly assign the class to the section and make sure the code is added.

Let us know how it goes.

#9

Hi, now I have applied it for the page in the secure note,

It work fine in some sizes but when you drag the window wider you can se it jumps to small in some window sizes.

#10

Hi there,

The code provided:

removes the left and right margin to the section where you assign the class to for devices width from 979px or less.

Please note that this code should help you get started and you can edit this according to your need. You can adjust the margin value in the code as you wish.

#11

Okey, but this code don’t really solve the problem well i’m afraid.

Even if I change it up it seems like there must be a better solution for having a limit on how wide a text section we be placed across a screen.

I have an example how I would like it to be: https://offer.ebenpagantraining.com/5-blueprints/

Is it possible to get it like it’s on this page?

#12

Hi There,

You can set a max-wdth for each brakpoint provided above and see if that helps.

Example:
max-width:500px

Thanks!

#13

HEy,

I’m sorry but this solution is not good.

Can you instruct me on how I can put a limit on how wide the text will be. So instead of using margins to limit the width I use a max limit for how wide the text will be, does it make sense?

The same function that is for text on this page: https://offer.ebenpagantraining.com/5-blueprints/

#14

Solved it with this code:

.no-margin-mobile{
max-width: 768px;
margin: 0 auto !important;
float: none !important;
}

#15

Last question:

If you look at this page: https://alla3dskrivare.se/annonsera/

The text font size is shrinking with the size of the page, how can I make the font of the font size stay the same?

#16

Hi There,

The font size are expected behaviour of a responsive website.
The sizes are set in “percent” and “em” value. If you want to remove the responsiveness of the font please add PX value to the elements.
for example :

h1, .h1 {
    font-size: 45px;
}

current css is.

h1, .h1 {
    font-size: 260%;
}

You can override the current css by adding it in custom css.

Hope this helps.

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.