Image banner text and responsive

[Marine]

Hello,

at the top of my new site, as many people, I’ve chosen a big image with a message, right aligned. I’ve chosen a row full width with an image banner inside with the text. But I have 2 issues:
– To respect the mockup my designer made, I’ve chosen right align for the text and the content but I’d like my text to be vertically aligned with the end of my main navigation (“nous contacter”) which is boxed. I guess that with the row in full width, I cant’ do this except using a margin-right but I’ll have responsive issue in that case… Cf Print screens attached.
– Second issue, the responsive 🙁 I’ve modified the margin-bottom from 50% to 88% to display the text outside the computers screens on the image. But on tablets / mobile, the text is not totally displayed, do I have to set up media queries for each screen range of sizes or is there another way?
Tx a lot for your help, I’ve spend 2 hours studying background images / position / size… with Boostrap and but it’s sill messy in my head…
Marine

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Hi Marine,

If you want it aligned to the top, then best bet is to use this css:

.intro .sf-animation[data-animation="none"].image-banner-content {
    bottom: auto!important;
    margin-bottom: 0!important;
    top: 0!important;
    padding: 0px 20px!important;
    width: 1170px;
    margin: 0 auto;
    left: 50%!important;
    -webkit-transform: translateX(-50%)!important;
    -o-transform: translateX(-50%)!important;
    -moz-transform: translateX(-50%)!important;
    transform: translateX(-50%)!important;
    max-width: 100%;
}
.intro .image-banner-content.text-right h1 {
    margin-top: 0;
}

Then you can adjust with media queries as you like. Hope that helps!

– Ed

[Marine]

Yeah, tx a lot Ed!

[David Martin – Support]

Thanks Ed. Marking as resolved.

Thanks.