Mobiel issue

davidbowen2014 · July 2015

I'm using a Seperator with text with a custom CSS class as follows;

.text30 {font-size: 30px; line-height: 100%;}

This doesn't work on a mobile view, https://www.flickr.com/photos/83289911@N04/20027364776/ as you can see the text is cut off on the right.

Any help appreciated.

Albert · July 2015

Hi,

use !important declaration and this should help.

Thanks!

davidbowen2014 · July 2015

I've updated the class to;

.text30 {font-size: 30px; line-height: 100%; !important;}

but the text is still cutting off

This is the site, http://www.devonmadeconservatories.co.uk/

davidbowen2014 · July 2015

Actually, the class hasn't taken. I'm seeing an error message

Expect Rbrace ar line 3 column 47

davidbowen2014 · July 2015

I've fixed the RBrace issue but it's still cutting off the text on mobiles

Albert · July 2015

Where you did found this solution of !important declaration? Because your declaration is wrong. We recommend to look at http://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/ and learn how to add declarations for styles.

davidbowen2014 · July 2015

The declaration is now;

.text30a { font-size: 30px !important;}

That looks correct to me

davidbowen2014 · July 2015

This still isn't having an impact on the mobile view.

Can you please tell me what it should be in the custom css for the page?

Thanks,

David.

Albert · July 2015

We have checked your site already and there is no classes like text30a in your code. It does not exist at all so this can't work.

davidbowen2014 · July 2015

Hi,

I have changed the custom CSS class to;

.text30 { font-size: 30px; line-height: 100%; !important;}

This class has been applied to all the text seperators.

Coudl you please check and let me know.

Thanks,

David.

Albert · July 2015

Now it's ok as we see.

davidbowen2014 · July 2015

Yes, but responsive is still an issue on the text seperators with mobile showing the text cutoff on the right.

David.

Albert · July 2015

If you mean headings, then you can change their sizes on mobile devices with below css:

@media only screen and (max-width: 767px) { .vc_separator h4 { font-size: 15px !important; } }

davidbowen2014 · July 2015

This works to a point but I still have long text with seperator headings that are still cutting off the text on the right.

Is it possible to wrap long text with seperator heading onto another line?

Albert · July 2015

Simple braking words does not work for this element because it's VC. But why? We have no idea. We tried everything and looks like plugin is blocking this part of css. All you can do was presented in below css and that's all we were able to do:

@media only screen and (max-width: 767px) {

    .vc_separator h4 {
        min-width: 40%;
        text-align: center;
        white-space: inherit;
    }
    .vc_separator .vc_sep_holder {
        width: 20%;
    }

}

davidbowen2014 · July 2015

Hi, well done! I't not perfect but it looks way better than before.

Thanks for all your hard work on this.

David.

Albert · July 2015

You're welcome

Mobiel issue

Comments