Cannot set hero image flat

[antetomas]

Hi Support,

Please let me know how can I remove additional spacing around the hero image, so I can have a flat layout.

Here’s the link: https://antetomas.com/bulic-gradnja/

Here’s the image element, you can see it’s 1940 x 700 in size:

img alt=“Image” src=“https://antetomas.com/bulic-gradnja/wp-content/uploads/2018/05/architect-text-1.jpg” width=“1940” height=“700”

I tried to remove spacing using Cornerstone Layout, but without effect.

There is also a parent span element which has a margin of 50px:

span class=“e85-4 x-image”

If I put that margin to zero in Chrome Dev Tools, I get the flat layout I wanted, but I don’t know how to set it within Cornerstone.

Thanks.

Ante

[basanta]

Hi There,

I can see there is 50px margin around the image.

If you are using version 2 image element you must have the margin section and you can remove there.

Thanks

[antetomas]

Hi there,

yeah, there was a margin of 50px around the image, I missed it somehow in the Cornerstone. Anyway, I removed it so, now it’s ok.

However, another thing. If you try to squeeze the browser and make it one-column layout (mobile screen), the text below the icons becomes too wide. When there are 3 columns on a single line (wide screen), text width is ok.

Can I solve this with media queries or something else?

Thanks,
Ante

[jade]

Hi Ante,

Please click on each of the content area elements then click the customize option then add this code in the Element CSS of each element:

@media (max-width: 767px) {
  $el {
    max-width: 300px;
    margin: 0 auto;
  }
}

You can find more information about the Element CSS feature here:

Element CSS | Themeco Docs

Hope this helps.

[antetomas]

Hi,

I did what you suggested and it worked like a charm

Thanks a lot!

Bye,
Ante

[friech]

You’re more than welcome, glad we could help.

Cheers!