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.
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.
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 |
Thank you very much. Thanks to your code i managed to make it work.
Love the response time and the support!
Love the response time and the support!
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:
to:
(I've updated the code in my previous message in case someone else wants to use it)
Jordi
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
vertically centering can be pretty tricky. You could try the following code:
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