Lack of responsive heading

I have bought the Cloriato theme to have a great mobile experience. There seems to be a bug with the Slide 1 Caption Heading on the smallest screen (I only have one image on the slider) . As you may be able to see form the screen shot, the header does not shrink, and instead covers up the whole image. How do I fix this? This is the website: http://centerforlifetransitions.co/.
Thank you for your help!

 

Hello,

Greetings from InkThemes!

You can try the given CSS code (below) to make your slide 1 caption responsive on the smallest screen, you just have to paste the code in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and(max-width: 480px){
#slides .caption {
    padding-top: 0px;
    font-size: 12px;
    right: -126px;
    width: 397px;
    height: 21px;
}
 
#slides .caption h2 {
    font-size: 16px;
    line-height: 25px;
}
}

Hope it will resolve your issue

Thanks & Regards!
Priyanka
Inkthemes.com

 

Hi,
This is slightly better. I have added a sub-caption with the phone number that is barely visible in mobile. In addition, it covers the menu when the menu is opened. I have attached screen shots.

Have you not had this problem in the past? One solution i would like is to make it a header above or below the image (and not shrink it as much).

Thank you,
Edan

 

Hello,

Could you please provide us your Dashboard credentials at [email protected] with the matter you want to add in that field and with your other issues as well and we will do it for you.

Thanks & Regards!
Priyanka
Inkthemes.com

 

Hi Priya,

I don't have a problem giving you credentials, but I prefer not to. For a couple of reason.

1. How have you not solved this problem yet? This is the top of the home page of the theme - this should have been one of the first problems you encountered (or solved if you designed and coded starting with mobile). It is a problem in your demo pages as well. No one has complained yet?

2. I can make any changes myself - i just need to know which code lines to change or what to add. I am not a designer and not proficient with html/css so i need some help as to how to approach this. Can you provide a solution? Maybe update the themes for others as well?

Thank you,
Edan

 

Hello Edan,

Greetings from InkThemes!

Not an issue....

Use code (given below) in Custom CSS field of your Dashboard for once.

Code:

@media only screen and (max-width: 480px){
.caption.conference {
      max-width: 100%;
    height: auto;
    position: absolute;
    right: 43px;   
    top: 10px;
    width: 232px !important;
    }
    #slides .caption h2 {
    font-size: 17px;
    line-height: 1;
    margin-bottom: 3px;
    width: auto;
}
    #slides .caption p {
    font-size: 10px;
    margin-bottom: 10px;
}
#mobile_menu { 
    z-index: 9999;
}
}
    .feature_content .feature_box .feature_image {
    max-width: 100%;
    height: auto;
}

Hope it will resolve your issue

Thanks & Regards!
Priyanka
Inkthemes.com

 

Hi Priyanka,

I was able to get back to implement this code to attend to this issue. Its better, but not great. I have attached the screen shot of what it looks like now. Can this be improved? Can the transparent background behind the words "individuals, couples, etc." extend to the phone number as well? Also, the full statement - 'Individuals, Couples, & Group Therapy' - does not show, but is still cut off - can we make everything show with the transparent white/cream background?

Thank you,
Edan

 

Hello,

Please paste the code given below in Custom CSS section (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (max-width: 481px){
#slides .caption {
    width: 157px !important;
    height: auto !important;
}
#slides .caption p {
    font-size: 12px;
}
#slides .caption h2 {
    font-size: 12px;
    line-height: 16px;
    width: 100% !important;
}
}

Hope it will resolve your issue

Thanks & Regards!
Priyanka
InkThemes.com