Centering an image verticly and horizontaly on the first slide.

Permalink Browser Info Environment
Hi,

On the first slide of my website i want an image (logo) centered. I googled and i am using the following code atm.
.logo {
  width: 200px;
  height:auto;
   position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, 50%);  
    transform: translate(-50%, 50%);   
}


You can see the result here:http://grafomantestsite2.be/index.php...

But this is not optimal (not very responsive) + when editing the page in concrete5 the logo is standing in the middle of the editor. Which can be confusing for clients.

Is there another way to fix this?

Thanks for the awesome report.

Type: Pre-Sale
Status: In Progress
grafoman
View Replies:
jordif replied on at Permalink Reply
jordif
Hi,

vertically centering can be pretty tricky. You could try the following code:

#slide1,
#slide1 > .container,
#slide1 > .container > .row,
#slide1 > .container > .row > .col-sm-12 {
    height: 100%;
}
#slide1 > .container > .row {
    height: 100%;
    display: table;
    width: 100%;
    margin: 0;
}
#slide1 > .container > .row > .col-sm-12 {
    height: 100%;
    width: 100%;


This should make any element in the first slide vertically centered, while still being responsive and not interfering with editing mode.


Hope this helps,

Jordi
grafoman replied on at Permalink Reply
grafoman
Thank you very much. Thanks to your code i managed to make it work.

Love the response time and the support!
jordif replied on at Permalink Reply
jordif
Hi,

glad it worked :)

By the way, I've just seen that in Firefox the image is not centered horizontally, you'll need to change this:

#slide1 > .container > .row {
    height: 100%;
    display: table;
}


to:

#slide1 > .container > .row {
    height: 100%;
    display: table;
    width: 100%;
    margin: 0;
}


(I've updated the code in my previous message in case someone else wants to use it)

Jordi

concrete5 Environment Information

Unable to load environment info

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.152 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.