Change margin only on desktop and tablet

Support
#1

Used the following code trying to change margin of the whole body section on only desktop and tablet

@media (min-width:480px){
.x-text {
padding: 0 0px;
margin-left: 170px
}
}

Only the body-text is moving as wished
How can I get also headings and all other stuff lined with that body-text.

#2

Hey,

Can you provide to us a screenshot of what do you want to change?

#3

Hi John

The red dotted line is the preferred margin for all items.
So all items left from dotted line must move to the right.
Hope this is clear.

#4

Hi There,

Thank you for the clarification, please remove the margins you applied on the text, and lets reduce the container’s width instead.

@media (min-width: 768px) {
	.page-id-82 .x-container.width {
		width: 60%;
	}
}

Feel free to adjust the 60% value.

Hope it helps,
Cheers :slight_smile:

#5

Allright thats another way to achieve this.
But now I would like the part NAP in the word mark lining with the body-text margin on desktop and ipad
So the word mark has to move to the left.

#6

Hi There,

Please clarify what you are trying to achieve.

Thank you

#7

Hi Joao
Sorry I did not make myself clear.
Like to line bodytext with part (the N of NAP) of my header logo according to the red dotted line.
On desktop and ipad.
On mobiel I use full width for my body-text.

Hope this helps.

#8

Hi there,

I tried checking your site but the password that you have provided previously doesn’t seem to work anymore.

Kindly provide the correct access so that we could check it.

Thank you.

#9

Hi Jade

I have removed the blocking so you can take a look now.
Thanks

#10

Hi There,

In conjunction with the CSS code I’ve provided above, please add this as well.

@media (min-width: 980px) {
	.ordernap-logo {
		margin-left: -180px;
	}
}

Then add a CLASS ordernap-logo to your logo image. You should then get this result (https://prnt.sc/grd825) on desktop and iPad.

Hope it helps,
Cheers!

#11

That works just fine. Thanks!
Now I am trying to adjust the width of the logo on mobile…

#12

Hi There,

To change the width of logo, please also add this CSS:

@media (max-width: 480px){
    #x-section-1 img.x-img.x-img-none {
        max-width: 200px !important;
    }
}
#13

Hi there
That works sublime. Thanks again.
Tjeerd

#14

You’re welcome.