Hello, I've modified the template.css to get a different styled slideshow page, with displaying a logo instead of the main h1 text. It's sort of working for now... However, when I open the website in my browser like Safari or Chrome, the slideshow-image and logo don't come down in the right position, that is, they are not centered on the screen. It repositions the right way only if I adjust the window of my browser, which is only possible on my computer, and not on my iPhone or iPad.
I get this:
This image is hidden for guests. Please log in or register to see it.
while it should be this:
This image is hidden for guests. Please log in or register to see it.
What could I have done wrong?
This is the css I have modified to display the logo, instead of the main h1:
/* SLIDESHOW */
#jf-slideshow {
background-clip: border-box;
background-color: #000020;
background-image: url(../images/banner.jpg);
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
position: relative;
z-index: 50;
}
#jf-slideshow .main {
color: #fff;
font-family: PollerOne;
font-size: 32px;
font-weight: normal;
line-height: 32px;
text-align: center;
}
#jf-slideshow .main h1 {
background-clip: border-box;
background-image: url(../images/logolarge.png);
background-origin: padding-box;
background-position: top center;
background-repeat: no-repeat;
background-size: 90%;
font-size: 90px;
font-weight: normal;
font-family: PollerOne;
padding-top: 10px;
}