Slider post titles on mobile devices are not centered

Hello -

I used this code to adjust the font of the post titles on the slider on mobile devices:

@media (max-width: 768px) {
.flex-caption {
display: block;
}
.flex-caption .excerpt {
display: none;
}
}

Problem: the font is not centered on the photo. It begins on the lower right side of the slider photo and runs off the page. How can I get the font centered?

Thanks.
(www.andionadventure.com)

Hi there

Add this css as well:

@media (max-width: 768px){
#page h2.entry-title {
width: 38%;
}
}

That code fixed the font on the slider but also adjusted the position of the titles on the blog page. Any suggestions on fixing that? Thanks.

Hello there,

I hope you are doing well today.

Please try replacing the previous CSS with this:


@media (max-width: 768px){
.page h2.entry-title {
width: 38%;
}
}

Best Regards,
Support

Hello - The above code fixed the blog post titles on the mobile device but the titles on the slider are still showing just in the bottom right corner of the slider photo. Any other suggestions? Thanks.

Hi there,
Thanks for keeping in touch.
In this case, could you try out the following CSS code:

@media only screen and (max-width:479px){
.slides h2.entry-title {
float: left !important;
margin-left: -25px !important;
padding-left: 0px !important;
font-size: 12px;
}
.read-more {
float: left;
margin-left: -100px;
margin-top: 25px;
}
ul.post-categories {
float: left;
}
}
@media only screen and (min-width:480px) and (max-width:768px){
.slides h2.entry-title {
float: left !important;
margin-left: -25px !important;
padding-left: 0px !important;
font-size: 12px;
}
ul.post-categories {
float: left;
}
.read-more {
float: left;
margin-top: 25px;
}
}

I hope this helps.
Best Regards,
Support.

Thanks for your response. Unfortunately, that didn’t work either. It deleted all font from the slider. Any other ideas?

Hi there,
Thanks for writing back.
In this case, could you kindly provide us with temporary admin access to your WordPress Dashboard so that we can have a closer look into this.

You may create a new administrator user within your WordPress Dashboard using your email address. You may then copy the login credentials to us in your reply.

I look forward to your reply.
Best Regards,
Support.

Ok - I set you up as a new user
New user registration on your site Andi on Adventure:

Username: Andi Colorlib

Email: [email protected]

Password: l4W9qPytZ45!i!!mjUK0X8z&

Hi there,
Thanks for keeping in touch.
Unfortunately those credentials seem to redirect to the “My accounts” page.

Could you kindly counter-check on them.

I look forward to your reply.
Best Regards,
Support.

Sorry - I may have forgotten to change your role to “administrator”.

Let’s try again -

Username: Andi Colorlib

Email: [email protected]

Password: hm@jQpidLEcZK3x#45mWGZFE

Hello - Any updates? Did that login info work for you?

Thanks!

Hi there

Im so sorry to say but there is a lot of work to make text and buttons responsive on small screen devices in this question, that’s the reason why they are hidden on mobile devices, :frowning:

Hello - If it’s not possible or is too much work, I’ll just delete the slider from mobile devices. Can you provide the code to do that?
Thanks…

Thank you for understanding :slight_smile:

use this code and it will disappear under 768 px

@media (max-width: 768px){
.home .top-section {
display: none;
}
}

Ok…got it done. Thanks for all your help!

Cool :slight_smile:

I will close this case now, Feel free to contact us again if you have other questions Thanks!