[Resolved] Visual Composer column rows not reading on Mobiles

Home Forums Support [Resolved] Visual Composer column rows not reading on Mobiles

Home Forums Support Visual Composer column rows not reading on Mobiles

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #172287
    Joanne Smith

    Hi

    I am having problems with my TEST web pages for Visual Composer code ( using their demo code )being read correctly on smartphones ( especially the small screens ) the content of the rows are not being responsive in your theme – they are still trying to be read as 1 row with 3 columns on the screen and squashed the text up and you cannot read.

    when I try another theme ( other htan yours ) on a different test website – everything is actually working quite well with the 3 x coloumns on a row DROPPING down into place under one another and not getting squashed side by side on one row – — (( there is a problem with the text layout but that can be fixed later on this other theme )

    lets compare the same page side by side

    A) your theme – for my TEST FAQ PAGE

    looks like this

    http://quirktools.com/screenfly/#u=http%3A//www.yazoogle.com.au/faq-vc-page/&w=320&h=640&a=38

    Live page: http://www.yazoogle.com.au/faq-vc-page/

    and

    B) and on a different theme TEST FAQ PAGE ( same visual composer code )

    http://quirktools.com/screenfly/#u=http%3A//www.arakhnewebdesign.com/image-separator/&w=320&h=533&a=34

    http://www.arakhnewebdesign.com/test-faq-page/

    Can you FIX your theme to read Visual Composer mobile phone layout issues with columns centering correctly on the screen and not in a straight row with text squashed up.

    Cheers

    Joanne

    #172319
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #172379
    Joanne Smith

    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

    columns not responsive

    they should look like this

    correct responsive columns on row

    • This reply was modified 8 years, 1 month ago by Tom.
    #172380
    Joanne Smith
    #172399
    Tom
    Lead Developer
    Lead Developer

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

    Can you clear your browser cache?

    #172632
    Joanne Smith

    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

    #172713
    Tom
    Lead Developer
    Lead Developer

    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?

    #172778
    Joanne Smith

    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

    • This reply was modified 8 years, 1 month ago by Tom.
    #172783
    Tom
    Lead Developer
    Lead Developer

    Glad it worked ๐Ÿ™‚

    #172842
    Joanne Smith

    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

    • This reply was modified 8 years, 1 month ago by Tom.
    #172910
    Tom
    Lead Developer
    Lead Developer

    Glad I could help ๐Ÿ™‚

    #205121
    Joanne Smith

    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

    • This reply was modified 7 years, 9 months ago by Joanne Smith.
    • This reply was modified 7 years, 9 months ago by Joanne Smith.
    #205276
    Tom
    Lead Developer
    Lead Developer

    Hi Joanne,

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

    #205281
    Joanne Smith

    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

    #205283
    Joanne Smith

    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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.