Support Center Visit Demo License manager Buy @ envato

Custom Heading in VC not acting reponsive correctly.

corbanduskcorbandusk
in Visual Composer
Hi,

I've built up my website and am happy with the layout on laptop and tablet but when I view it on mobile the custom headers I've placed on pages such as http://foundationsofbrilliance.ie/education/ do not resize properly and ruin the whole landing page effect.

I've tried multiple design option settings to no avail and before I try just making them custom heading setting and redoing the whole thing (i.e. H2, H4 etc) I'm wondering if there's a setting or code I've missed.

Please help!

Thanks.

Comments

  • AlbertAlbert
    Hi,

    did you tried "Decrease fonts" option under Theme options > Responsive section?
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • corbanduskcorbandusk
    Yeah, and it works for normal headings and text boxes.

    I have basically created a background section with 1/2 +1/2 columns inside it, and in those columns I've used several Custom Header widgets from VC in one and a custom header plus CF7 in the other. This looks great but when the website shrinks for mobile it tries to put the whole section into one column, wrecking the layout and text.
  • corbanduskcorbandusk
    edited September 2015
    I've manged to fix the row squash by duplicating the row, taking out on the picture background on the second one so it's not repeated and then hiding the header/contact form in the top section and deleting the left column in the duplicate row, and making it hidden on all devises bar mobile (had to make sure it wasn't full height too).

    What's not fixed, is that the custom headers in the top right column don't shrink enough to be viewable on mobile.

    The one in the right hand column is font size 26 and it resizes perfectly, but the font size 45 and 100 go mad.

    You know what, I think just creating a new row with different font sizes and hiding it for larger screens, then hiding my original one on mobile will work.

    A bit of messing about though eh.
  • corbanduskcorbandusk
    It's just that the row set up didn't work and the font size was too big.

    Using extra sections and making sure the right ones are hidden is the way around this.

    Thanks.
  • AlbertAlbert
    Does it mean you sorted everything what you want? Or something left? Because if above option does not work, then should be possible to do it with some custom css.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • corbanduskcorbandusk
    Yep, got it sorted thanks, it was just the big difference between mobile and bigger screens and how the custom font wouldn't adapt when in a column rather than a full row. So I changed the layout for mobile.

    Cheers.
  • AlbertAlbert
    Ok, great :) We're glad to hear that.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.