Change margins on mobile display

[BlissfulBellies]

Hi there,

I had some help with my margins displaying on my website last year, please see below for previous post. The margins worked great on desktop however, I want the recipe post to display fullwidth on mobile and tablet devices. Can you please let me know how I need to adjust my css accordingly. Many thanks in advance.
Naomi

Previous post from Nov 2017 -

Hi. I have been playing around with css as mentioned from other topics however with no luck so far. I am wanting my single posts (and recipes) not so wide on fullscreen.

you can see here http://bbclub.com.au/recipe/no-bake-chocolate-muesli-slice/

Is there a way I can add margins to these single recipe pages? I’d also like to make sure though the margins do not display on mobile device, I want the image to display fullwidth on mobile.

I hope this makes sense.
Many thanks in advance!
Naomi

JadeStaff
Nov '17

Hi Naomi,

Please try this:

@media (min-width: 768px) {
.single-recipe .x-main.full {
margin-left: 100px;
margin-right: 100px;
}
}

[nico]

Hi @BlissfulBellies,

Thanks for writing in.

You can try adding this code below:

@media (max-width: 979px){
.single-recipe .x-main.full {
    margin-left: 0px;
    margin-right: 0px;
}
} 

Let us know how it goes.

Thanks.

[BlissfulBellies]

Awesome! thank you, worked perfectly!

[christian]

You’re welcome.