Joomla Templates Club 406,261 posts

[karca Friend karcaJoin date: July 2011Posts: 47Downloads:0Uploads:18 Thanks: 11]

#204914

Please, how can I center verticaly the image in parallax on the homepage? I would like to have images in parallax sections – Poslechněte si and Poznejte náš sbor – verticaly centered but I´m not able to reach it. I used class “.vystredit” for it –
.vystredit { vertical-align: middle; }
and put it to custom.css and to the div where image belongs – but it didn´t worked 🙁 Please do you have some tip how to make it? Thank you!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#564154

Hello
Try this
Apply below property on the image in source code :


float: none;
margin-right: auto;
margin-left: auto;
}


image code


<img src="/liberec/web/images/liberec/lide/pavel_kaze5.jpg" alt="" style="
float: none;
margin-right: auto;
margin-left: auto;
">

Output >>> http://prntscr.com/6k6x9p

[karca Friend karcaJoin date: July 2011Posts: 47Downloads:0Uploads:18 Thanks: 11]

#564194

Thank you pankajsharma, but I wanted center image VERTICALLY. As I can see the result – now its centered horizontally 🙂 Please, can you help me with vertical alignment? Thank you!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#564200

Hello
Add the below code in your custom.css file


@media screen and (min-width: 768px) {
.section.parallax.section-image.inview .img-left {
top: 50px!important;
}
}


Adjust the value 50px as per you need in above code .
Clear cache and check.

[karca Friend karcaJoin date: July 2011Posts: 47Downloads:0Uploads:18 Thanks: 11]

#564241

Thank you, pankajsharma! I added the code above and it looks good! Can I have one more question? I would like to have smaller white place after text and image in this mentioned parallax “Poslechněte si kázání”. Place above text and image is OK, but after them is too large. Can you help me with this also? You can see the bigger white space on the screenshot – http://ctrlv.cz/LHl6. Thank you!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#564242

Hello
If you want to reduce the height of this module add below code
in custom.css file reduce the value of height in below code

.section.parallax.section-image {
min-height: 523px!important;
}


It will reduce the white space below on bottom part of module.

1 user says Thank You to Pankaj Sharma for this useful post

1. karca

[Author]

Posts