Home › Forums › Support › Visual Composer column rows not reading on Mobiles › Reply To: Visual Composer column rows not reading on Mobiles
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
- This reply was modified 7 years, 10 months ago by Joanne Smith.