Hero image

[SchlenzigxJones]

Hi,

What is the best way to create a hero image?

I have made mine with 1/2 + 1/2 columns, with headline, text and button on the left side and then a image on the right. But that makes the image small and not to the edge of the browser.

So I have tried making the same columns in a row with the setting on full width and the image as a column background. But that makes the text stick to the left edge of the browser which doesn’t look good.

The standard, tabbed hero and hero doesn’t work, since there is a lot of animation and i need some text and buttons on the hero.

Do you have an idea to how I can get the best of both worlds (with and without a row)

/M

[Kyle – SUPPORT]

Hi

Can you provide a mockup of what you’re trying to do?

– Kyle

[SchlenzigxJones]

This reply has been marked as private.

[SchlenzigxJones]

Actually, your “poster” from the atelier demo would also do nicely. http://swiftideas.com/home/home-poster/

But I’m afraid that the text will disappear on a phone + we have a whole lot more text – and I’m not sure where to insert the text + how to style it.

/M

[Kyle – SUPPORT]

Hi

We used the swift slider, the text will remain on mobile but it may be on top of the image

– Kyle

[SchlenzigxJones]

Hi Kyle,

Yes, I just tried the swift slider. It’s no good on mobile and the text is not as far to the left as I would have liked.

Is there another way to get what I showed you on the screendumb?

/M

[Kyle – SUPPORT]

The best way would be to create the background image, with the bottles on the right and space to the left. Then add it as your background image in a row, then a 1/2 text box inside the row

– Kyle

[SchlenzigxJones]

I’ve tried that. With the row content set to full width.

The only problem is that the text then sits on the left edge instead of being aligned with the logo.

Can the full width setting be overwritten for the left column?

[Kyle – SUPPORT]

Don’t set it to full width

– Kyle

[SchlenzigxJones]

Ah, I see. Didn’t think of that.

Not sure that I like it, since the text is unreadable on a phone. Would it be possible to do the same, but so that the picture hops down to below the text on a phone? Much like the other sections I did (Full width row with 2 columns) but were the text doesn’t go full width?

/M

[Kyle – SUPPORT]

If you wanted that to happen you would have to use a text box and an image on the right, set the row to dull width but add padding on the text box

– Kyle

[SchlenzigxJones]

Ok, I see.

If I was to go with your initial suggestion, with the image as background on the row – is there then an ability to hide either the image or the text on smaller screens?

Thanks

/M

[Kyle – SUPPORT]

Yes, if you use a column you can use the visibility options to hide on certain screen sizes

– Kyle

[SchlenzigxJones]

This reply has been marked as private.

[Kyle – SUPPORT]

No problem