Slider text alignment issue

Hi there!

I just noticed that the behavior of my slider texts and button changed. It is no longer aligned vertically to the center of the page but it rather seems to keep fixed distance from the top. This is not acceptable as on many resolutions some parts of texts and button are not visible at all. It is also not how it behaves on the Sydney demo page (and as it used to behave on ma page before). I haven’t been doing anything to my page recently, so this sudden change is a surprise to me. How can this be fixed?

Take a look at the main screen www.prokreacja.com

I’d really appreciate any help.

Hi,

I guess the issue is caused by the large main-title you have used, please try to add a smaller main-title ( smaller font ) and check if that works better and if you can please post a screenshot and the screen-size where the issue happens, so I can check / fix on that specific screen-size.

Best Regards,
Csaba

Thx for quick reply.

My page looks ok on my big screen (2560x1440), is acceptable (but still not vertically centered) on 1920x1080 or 1680x1050, all other resolutions are totally screwed. Plus all mobile views are also broken now…

I really appreciate your help.

Hi,

I’ve checked your site on 1440x900px and it looks OK, please post link to a screenshot where I can see the issue.

Best Regards,
Csaba

Hi,

On 1440x900 all content is visible, but it is still not ok, as the texts and button are not vertically centered (as they should be). I tried changing the size of the main headline in css and it doesn’t help.

Here you can see some extreme examples:


Have a nice day!

Hi,

You can move the slider inner area more to top on smaller screens with this CUstom CSS:

@media only screen and (max-width: 1024px) {
.slide-inner {
    top: 30% !important;
}
}

@media only screen and (max-width: 768px) {
.slide-inner {
    top: 25% !important;
}
}

@media only screen and (max-width: 480px) {
.slide-inner {
    top: 20% !important;
}
}
  • modify the values depending on a few screen-sizes to change the position of the slider inner.

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

Hi!

Thanks a lot!

Yes, it does help a little, but isn’t the vertical center alignment of that block of content the default behavior in Sydney? It worked perfectly until very recently, and then it got screwed? Any idea why? Why should we fix something what should be default?

Hi,

I guess that got screwed when you’ve made the modifications on the header inner area, like the very large font-size of the title.

Best Regards,
Csaba