Left border on fullwidth elements

ideenstart · January 2020

Hi !

My website is full width with a grid with of 1240px.

I have created a page header image by creating a section set to fullwidth and adding a background image.

I need to add a caption text that is vertically aligned on the left side with the other page content.

Adding 1/6 placeholder is too much ...
I have also tried to add a left padding in the wrap like 250px or 18% ... but it looks different on every browser/resolution...

So how can I have content on a fullwidth section on the same left border like in the other sections where I don't set any style ... ?!

maybe this screenshot explains what I want ... https://screencast.com/t/PkGIlqrKOf

Pablo · January 2020

Hello,

Can you send us a link to your page?

Also, I do not quite understand, you want to move that button to the contact form, right?

If I'm missing something, please explain it once more.

Thanks

ideenstart · January 2020

Hi Pablo !

Can I send you a private reply as the page is pwd protected right now under development !

BTW
the button is fine - my problem is only the left alignment of items on a full width section vs not full width section !

All should be aligned left side ...

BTW2
Meanwhile I have changed page grid to 1392 now :-)

Thanks
Tom

Pablo · January 2020

Can you disable it for moment?

Investigation time will take me not more than 2 hours.

Giving me dashboard access will surely make the problem resolve longer, right now we have a little bit queue with private accesses.

Thanks

ideenstart · January 2020

Hi !

The URL is https://enhancedvideo-jci.com ...

Thanks
Tom

Pablo · January 2020

Can you disable the parallax effect? It should started to work fine then, because parallax effect is limited to the width of the image and some options could not work.

Thanks

ideenstart · January 2020

I've set it to center top now ...

I've also set the left padding of the "caption" to 0px ...

And now it is fully left - but I want it to be left aligned with the below content !

Thx
Tom

Pablo · January 2020

That's why, you should apply some padding to it.

You can do it in the column settings.

http://prntscr.com/qlrpoh

If I told you something wrong, please explain me it greater, because I'm not sure If I understand.

Thanks

ideenstart · January 2020

Of course ... But WHAT padding ?
As the border is different on every screen resolution - WHAT SETTING keeps the content aligned with the other content not on full width ???
For example on my Macbook it looks fine with 225pk padding left ...
On my 27" it looks fine with 280px left padding ...

Do you see my problem now? :-)

Thanks

Tom

Pablo · January 2020

If you would like to see it proper on all devices while you keep the full width option enabled, you should apply the percent value, not pixels.

Thanks

ideenstart · January 2020

Not that I haven't tried it before ... It just won't work !

Please test yourself ... I've set it now to 9%

9% left padding works fairly well on my Macbook and mobile ...
But on 27" desktop it's too much left !

And as a proof - the text on the grey section below now is 14% padding left - that's fine on the 27" desktop but totally shifted to the right on the Macbook...

Browser is always Chrome ...

Thanks
Tom

Bryan · January 2020

Hey Tom,

well, what can we do about that, a full width section is full width. It is normal that a 9% padding value would get more narrow while you extend the width of the browser.

You will never achieve such a sollution. If one section is full width, and the other is not, they will not have the same grid values, no matter what you do.

Besides, the background image always covers the full width of the section, so if you want the content to allign, why do you use full width?

thanks

ideenstart · January 2020

Why?

Because I want a fullscreen background image (like a slider just with one pic) with a caption text that is aligned with other parts of the homepage ... I don't think that this such a special request !?

Is it maybe possible to have a non fullscreen element below with a negative top padding so it’s will be shown on the fullscreen element ?

Thanks
Tom

Pablo · January 2020

Yes, you can insert the element which will have negative margin, exactly you can do it with "Wrap" it's named a "Move Up" option

See the screenshot:

http://prntscr.com/qmytka

Thanks

ideenstart · January 2020

Thanks Pablo !
That trick did help me a lot !

Left border on fullwidth elements

Comments