Visual Composer column rows not reading on Mobiles

Hi there,

Can you try this CSS?:

@media (max-width: 768px) {
    .vc_non_responsive .vc_row .vc_col-sm-3 {
        width: 100%;
    }
    .vc_column-inner h1 {
        font-size: 40px !important;
    }
}

No that did not work -- the columns did not move under one another
and the CSS had a error on line ' font-size: 40px !important; '

The columns are NOT responsive -- here are 4 columns in a row squashed up together

they should look like this

http://www.yazoogle.com.au/screenfly-test-your-website-at-different-screen-resolutions-2016-02-12-10-07-46/

and

should look like this

http://www.yazoogle.com.au/screenfly-test-your-website-at-different-screen-resolutions-2016-02-12-10-52-18/

It looks great to me?: http://screencast.com/t/Lm2eGAesX9

Can you clear your browser cache?

hey

just wondering if there is a solution ? When I checked using a very basic theme generated in http://underscores.me/ -- and added it to my site the columns drop up under one another as they supposed to from a row? A true responsive design.

I would really like your theme to be able to work with VISUAL COMPOSER https://vc.wpbakery.com/ as well - as it the main drop and drag program I use to add content to the web pages using all their special add-ons that makes the web page look professional.

With your theme, ALL works OK on a desktop or tablet but as soon as we get to a phone the smaller screen ( which all clients want ) then the rows that may have 3 columns or 4 columns with content -- do not drop under one another..but squash up. I would LOVE a fix with your theme to work.

Have you other clients using VISUAL Composer and also the additional plugin called ' ultimate add-ons Visual Composer '

take care

Joanne

Hi Joanne,

Did you see my post above?: https://generatepress.com/forums/topic/visual-composer-column-rows-not-reading-on-mobiles/#post-172399

The FAQ page looks great to me on mobile - maybe you just need to clear your browser cache to see the changes?

Yes that worked

and as you suggested when I added

Try this code, it may do a better job at making all columns site-wide responsive:

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

this also fixed other column issues

Joanne

Glad it worked :)

OK

Thanks Tom -- fantastic support as per usual -- everything is working now as it should

If anyone uses the plugin Visual Composer with this theme use the following Custom CSS to fix the columns and font issues!

.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) {
    .vc_non_responsive .vc_row .vc_col-sm-3 {
        width: 100%;
    }
    .vc_column-inner h1 {
        font-size: 20px !important;
    }
    .vc_column_container {
        width: 100% !important;
    }
    .entry-content h1 {
        font-size: 60px !important;
    }
    .entry-content h2 {
        font-size:30px !important;
    }
}

Cheers

Joanne

Glad I could help :)

hi

if you look at my testimonials page the text is over flowing the container

https://www.yazoogle.com.au/testimonials/

the above CSS did not fix this page AND the Heading Testimonials is also not resized ?

and the submission for for the testimonial towards the end of the page - text size is not correct either -- the boxes are overlapping the text??

Any coding help would be great!!

Joanne

Hi Joanne,

I'm not seeing any issues on your site? Can you take a screenshot of what you're seeing?

Hi

I fixed one part myself with new layout from the Testimonails plugin

BUT there are 2 parts on the page that need some coding

1) The Testimonial Feedback form at the bottom of the page -- the text is overlapping the boxes

https://www.yazoogle.com.au/wp-content/uploads/2016/06/form-text-running-over-boxes.jpg

2) AND the heading at the top of the page the Word Testimonials -- can I have the CSS to resize to say 16px for mobiles ( or whatever you suggest )

https://www.yazoogle.com.au/wp-content/uploads/2016/06/title-text-too-big.jpg

thanks

in addition

on the home page

https://www.yazoogle.com.au/wp-content/uploads/2016/06/Header-text-needs-to-be-made-smaller-2

the H2 text is running out of the box containers