Home>Support>CSS margin-left options for mobile and desktop

CSS margin-left options for mobile and desktop

By Martin Timbers, 7 years ago. Last reply by Martin Timbers, 7 years ago.

Hi, In Page Builder I have some text over a background image but I want to specify two different margin-left CSS options, one for the desktop and one for mobile, I know how to set the CSS margin-left in the attributes panel for desktop but have no idea how to specify a different setting for mobile. I have googled and tried over a dozen @media options but nothing works. PLEASE help!
Thanks
Martin

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Martin,

    Please open the row that houses the relevant widgets by clicking the wrench icon above it. Head over to the row styles sidebar and open the Attribute settings group. Set the row class as adjusted-mobile-margin and then head over to the WP AdminAppearanceCustom CSS:

    @media (max-width: 660px){
	.adjusted-mobile-margin .panel-row-style {
		margin-left: 20px !important;
	}
}

    Adjust the max-width (at what browser width you want this CSS to kick in) and the margin left. How does that look?

    You might also need to install the SiteOrigin CSS Editor.

  2. 7 years, 10 months ago Martin Timbers

    Hi Alex,

    Many thanks for getting back to me. I followed all your instructions fully and downloaded the SiteOrigin CSS Editor and tried several times but nothing changed at all within the mobile (iPhone 5s). :(

    Regards
    Martin

  3. 7 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Martin,

    That’s odd. Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

  4. 7 years, 10 months ago Private Message - Martin Timbers

    This is a private message.

  5. 7 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Martin,

    Thanks.

    Okay so the issue here is that you applied the margin-left on a widget level rather than a row level – I didn’t account for that.

    Please change the previously provided CSS to:

    @media (max-width: 660px){
	.welcome.panel-widget-style {
		margin-left: 20px !important;
	}
}
  6. 7 years, 10 months ago Martin Timbers

    Alex,

    THANK YOU so much for your help, it works perfectly!

    Regards
    Martin

  7. 7 years, 10 months ago Martin Timbers

    Alex,

    One more quick question with this page. Am I right in thinking that an image (photo) when loaded into a VISUAL EDITOR resizes down in proportion when you shrink the browser to the size of a mobile BUT when it is loaded as a background image in a ROW with text in a Visual Editor placed over the top the text resizes down but the background image doesn’t? As this is what I am finding?

    Regards
    Martin

  8. 7 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Martin,

    Yes for the visual editor, and not exactly for the row background. Okay, well it depends on if the CSS background image display is set to cover, parallax or fixed, they all must maintain an aspect ratio. This means that if the height of the container doesn’t get smaller when the resolution does, the browser will do whatever it can to make sure the aspect ratio is maintained while covering the row. This means that the image can sometimes get clipped to maintain this. This is a CSS “feature” and sadly cannot be avoided outside of lowering the height of your row on mobile devices – I recommend using % based padding rather than px based padding if you’re using that.

    Does that make sense?

  9. 7 years, 10 months ago Martin Timbers

    Hi Alex,

    OK so if I had a background image loaded into a ROW and the original image is 1000px wide by 500px high and I wanted it to reduce down to 480px wide when viewed in a mobile device, could you give me an idea of the CSS that I would have to use please?

    Regards
    Martin

  10. 7 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Martin,

    Unfortunately, that’s not really something I can answer without trying it as there are too many factors to consider.

    With that said, you could, however, force it to appear in the manner you’re after by using a media query. Which would look something like this:

    @media (max-width: 768px){
	.example {
		height: 225px;
	}
}

    I’m sorry I can’t provide a more specific answer. :(

  11. 7 years, 10 months ago Martin Timbers

    Hi Alex,

    I think I am getting there thanks to your help.

    With regarding to loading the background image into a row (the image I am using is 1000px wide by 611px high). Once loaded into the row, I have to set – Row Styles – CSS Class to 611px otherwise the height of the image collapses into a long thin band.

    Under Row – Design where I have loaded the image into ‘background image’ I am not sure which setting I should be using under ‘background image display’. ?

    Regards
    Martin

  12. 7 years, 9 months ago Alex S
    Hi, I Work Here

    Hi Martin,

    Correct – the background image isn’t able to dictate the height of the container so you must apply something to give the container height. I personally recommend setting a percentage based padding instead as it’ll allow for the row to automatically resize depending on the resolution.

    The background image display is a personal preference sort of thing. I would recommend trying them all and deciding on the one you’re after. More often than not though, people use cover.

  13. 7 years, 9 months ago Martin Timbers

    Hi Alex,

    SORTED IT!

    It was your recommended “Percentage Based Padding” that worked. I didn’t even need to add the @media CSS that you mentioned earlier!

    Thank you so very much for your help!

    Regards
    Martin

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More