Archived topic
Visual Composer column rows not reading on Mobiles
19 replies · Started by Joanne Smith on February 12, 2016
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 :)
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
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
to follow up
It is actually called ' Info Banner ' add on in Visual Composer
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
Great to hear :)
