Help with margins and centering images

Support
#1

Hello!

I’m setting up my homepage. I want to have “Water” closer to the top of the pink square because initially it was giving me too large of a margin. I changed the “Row 1” margins to -75px but that resulted in my image being placed higher than the pink square. I had to add a gap above the image to lower it a little bit.
Is there an easier way to do this?

If you go to my website: www.crisisequipped.com you can see what I mean. The sections that say “Food” “First Aid” and “Shelter” are way too low but the element won’t let me change the margins at the top.
Help :slight_smile:

Thank you!!

#2

Hi There @NadiaCrisisEquipped

Thanks for writing in! You can assign the class “mtn” to your headlines to remove the top margins from your headings so that it will display as follows.

For further information, please refer to our element spacing guide here (https://theme.co/apex/forum/t/customizations-element-spacing/211)

Hope that helps.

#3

Hello!

I tried doing what you suggested but it’s not working. Originally the sections look like this:

See how there’s a large space between the H2 heading (“Food”, “Water”, etc) but a small space between the image and the top of the section.

I want the H2 heading to look like this (a little closer to the top) without the image next to it moving up as well. I added the gap to lower the image but I was hoping there was an easier way to do it.

I removed the margin settings and assigned the class to “mtn” but nothing changed.

Thanks for your help!
-Nadia

#4

Hello Nadia,

Thanks for updating the thread. :slight_smile:

On dev tools I added mtn class to the headline elements and it seems to be working fine and doing so should not have any effect on the image position. I have recorded a screencast. Please take a look. https://cl.ly/3p42363A2d2P

However, doing so will also disturb the layout and will disturb the proportion in between image and text. So what you can do in your case is probably resize the image and then re-upload. Or you need adjust the spacing of the elements manually by adjusting the values of Margin property.

Right now I see that the margin-top of headline element is set to 21%. You can set it to around 10%. And let text element also have 10% margin-top so that the spacing is evenly distributed.

Here is a sample screenshot.

Let us know how it goes.

Thanks.

#5

Thank you!! I changed a couple things and after a little trial and error, something worked! :smile: appreciate your time, and the video was super helpful. Thanks again!

#6

We are delighted to assist you with this.

Cheers!

#7

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