Architect Pro Responsive Slider Title

[Derek]

Hi Guys,

On Architect Pro the slider text is blank on mobile view. Do you have Custom CSS to allow just the slider title to be seen on mobile view? Obviously in smaller font size.

Thanks

Derek

[Sonl Sinha]

Hi Derek,

Kindly show us your website URL.

Regards,
Brad

[Derek]

Hi Brad,

I’m testing all the features on this site before I implement it elsewhere.

http://derekddesigns.ie/

Thanks

[Sonl Sinha]

Hi Derek,

Kindly go to Appearance>>Theme Option>>Basic Setting>>Custom CSS Box

Add this code there:

@media screen and (max-width:479px){
.nivo-caption{width:95% !important; bottom:0 !important;}
.nivo-caption, .nivo-controlNav{display:block !important;}
.slide_info p{margin:0 !important; font-size:10px !important;}
.slide_info h2{font-size:20px; line-height:20px;}
.slide_info h2 span{font-size:15px;}
}

Regards,
Brad

[Derek]

Hi Brad,

That gave me the title, sub title, description and buttons and none of them fit correctly.

I only want the title to be displayed on mobile and that’s it.

Can you check this out for me? I’ve left the code in so you can see for yourself.

Thanks

[Sonl Sinha]

Kindly remove the previous code.

Regards,
Brad

[Derek]

Hi Brad, I’ve removed it now. Thanks

[Sonl Sinha]

Hi Derek,

Add this code:

@media screen and (max-width:479px){
.nivo-caption{width:95%;}
.nivo-caption, .nivo-controlNav{display:block !important;}
.slide_info .slidebtn{display:none !important;}
.slide_info p{display:none;}
.slide_info h2{font-size:25px !important; line-height:25px;}
.slide_info h2 span{font-size:15px !important;}
}

Regards,
Brad

[Derek]

Thanks Brad, that looks great on mobile, though when I put my phone sideways it disappears. Will I just increase the max width until it shows on screen?

[Derek]

Yeah that worked by increasing the max width.

Thanks Brad, much appreciated.

[Sonl Sinha]

🙂

[Author]

Posts