[Resolved] Visual Composer column rows not reading on Mobiles

[Tom]

1. This is an issue with the plugin itself that they should fix.

@media (max-width: 768px) {
    .ttshowcase_form_wrap label {
        display: block;
        width: 100%;
    }
}

2. If you’re using the latest version of GP Premium, you can do this using Typography in “Customize > Typography > Mobile Typography”.

3. Same as #2 🙂

[Joanne Smith]

I have a style sheet already added with coding to fix bits and bobs for the mobile that we have gone over

I updated the plugin and set the MOBILE – text as suggested but it did not change anything

https://www.yazoogle.com.au/wp-content/uploads/2016/06/screenshot-www-yazoogle-com-au-2016-06-30-01-53-50.png

I then deleted the h1 – H2 – on the CSS style sheet and it did not change anything — the H2 heading actually grew too big

so I have attached the CSS style sheet again (( I think it is because I am using the plugin Visual Composer that it is setting its own font size independent to your theme fonts H1 – h2 etc ))

This is the CSS below I have on the website — I think I have to set a CSS style for the H2 heading as part of the VC plugin plugin called ‘ headings ‘ — so the text H2 (heading) in the BOX –id contained.

I am sort of caught in between the 2 programs

@charset “utf-8”;
/* CSS Document */
.page-header-image.grid-container {
max-width: 100%;
}

.page-header-image img {
width: 100%;
}

.vc_transform .inside-article {

padding-top: 0;

}

@media (max-width: 768px) {
.vc_non_responsive .vc_row .vc_col-sm-4 {
width: 100%;
}.nav-float-right .main-navigation.slideout-navigation .main-nav ul li a {
line-height: 35px;
}
.page-header-image-single img {
width: 100%;
}

@media (max-width: 768px) {
.main-navigation.slideout-navigation .main-nav ul li a {
background-color: #222;
color: #FFF;
}

/* on hover */
.main-navigation.slideout-navigation .main-nav ul li a:hover,
.main-navigation.slideout-navigation .main-nav ul li.sfHover a {
background-color: #F00;
color: #FFF;
}

/* current menu item */
.main-navigation.slideout-navigation .main-nav ul .current-menu-item > a {
background-color: #222;
color: #FFF;
}

@media (max-width: 768px) {
.entry-content h1 {
font-size: 30px !important;
}
.entry-content h2 {
font-size: 20px !important;
}

.entry-content h3 {
font-size:18px !important;
}

.entry-content p {
font-size:18px !important;
}

.site-logo {
margin-bottom: 20px;
}

.page-header-image.grid-container {
max-width: 100%;
}

.page-header-image img {
width: 100%;
}

.page .wpb_single_image .vc_figure {
display: inherit;
}

.vc_transform .inside-article {

padding-top: 0;

}

@media (max-width: 768px) {
.ttshowcase_form_wrap label {
display: block;
width: 100%;
}
}

@media (max-width: 768px) {
.vc_column_container {
width: 100% !important;
}
}

.page-header-image.grid-container {
max-width: 100%;
}

.page-header-image img {
width: 100%;
}

.page .wpb_single_image .vc_figure {
display: inherit;
}

.vc_transform .inside-article {
padding-top: 0;
}

}

any ideas ??

Joanne

• This reply was modified 9 years, 2 months ago by Joanne Smith.

[Joanne Smith]

to follow up

It is actually called ‘ Info Banner ‘ add on in Visual Composer

[Joanne Smith]

I have fixed — there is a independent font style size selector for mobiles in the plugin settings pop-up settings — that I had to activate with a pop up arrow – hidden ) !! — nothing to do with H1 – H2 – or P

All is well!

Joanne

[Tom]

Great to hear 🙂

[Author]

Posts