Wedding Pro Theme – Mobile Text Header Size

Home Forums All Other Themes Wedding Pro Theme – Mobile Text Header Size

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #79098
    CaroleeCarolee
    Member
    • Topics: 1
    • Replies: 5
    • Total: 6
    Member since: February 16, 2017

    When I view my website on a mobile device, the size of the header is too large. how can I adjust the size of how the text header for mobile appear a certain size versus the size of the desktop version of the header.
    website is
    www.shannonandcarolee.com

    #79143
    Sonnal S SinhaSonnal S Sinha
    Moderator
    • Topics: 0
    • Replies: 30586
    • Total: 30586
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

    Add this code there:

    @media screen and (max-width:767px) {
    .logo span.textlogo { padding:8px 0 8px 40px !important; font-size:32px;}
    .logo span.textlogo span.rightstyle { padding:8px 40px 0 0 !important;}
    }

    Regards,
    Chris

    #79211
    CaroleeCarolee
    Member
    • Topics: 1
    • Replies: 5
    • Total: 6
    Member since: February 16, 2017

    This code helped the font a little. But I would like it to be small and all on one line. There is still something that is trying to load (on the mobile version) underneath the header photo. There is nothing that is there because everything is showing on the page that should be showing.

    Can you help me troubleshoot this?
    thanks,
    Carolee

    #79213
    Sonnal S SinhaSonnal S Sinha
    Moderator
    • Topics: 0
    • Replies: 30586
    • Total: 30586
    Member since: August 16, 2013

    Hi,

    Can you send us the screenshot of your issues? Upload your screenshot on imgur.com and paste the share url here.

    Regards,
    Chris

    #79219
    CaroleeCarolee
    Member
    • Topics: 1
    • Replies: 5
    • Total: 6
    Member since: February 16, 2017

    these are two screenshots of what I see on the mobile version. the half circle image is the icon that scrolls when something is trying to load. everything is showing on that home screen that should be showing so I don’t know what is trying to load.
    http://imgur.com/a/pvc83

    #79228
    Sonnal S SinhaSonnal S Sinha
    Moderator
    • Topics: 0
    • Replies: 30586
    • Total: 30586
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

    Add this code there:

    @media screen and (max-width:1024px) {
    .slider-main { min-height:180px !important;}
    }

    Regards,
    Chris

    #79235
    CaroleeCarolee
    Member
    • Topics: 1
    • Replies: 5
    • Total: 6
    Member since: February 16, 2017

    That helped remove the loading icon area. How do I have the header text adjust to a smaller size when viewing on a mobile device?

    thanks!!

    #79242
    Sonnal S SinhaSonnal S Sinha
    Moderator
    • Topics: 0
    • Replies: 30586
    • Total: 30586
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

    Add this code there:

    @media screen and (max-width:767px) {
    .logo span.textlogo { padding:8px 0 8px 40px !important; font-size:30px !important;}
    .logo span.textlogo span.rightstyle { padding:8px 40px 0 0 !important;}
    }

    Regards,
    Chris

    #79245
    CaroleeCarolee
    Member
    • Topics: 1
    • Replies: 5
    • Total: 6
    Member since: February 16, 2017

    should I remove the code below you had me put in before the second code you sent?

    when I look at the desktop version after I put in this code there seems to be some sticking when I try to scroll on the home page.

    @media screen and (max-width:767px) {
    .logo span.textlogo { padding:8px 0 8px 40px !important; font-size:32px;}
    .logo span.textlogo span.rightstyle { padding:8px 40px 0 0 !important;}
    }

    #79256
    CaroleeCarolee
    Member
    • Topics: 1
    • Replies: 5
    • Total: 6
    Member since: February 16, 2017

    How do I get the mobile text header to show on just 1 line?

    #79308
    Sonnal S SinhaSonnal S Sinha
    Moderator
    • Topics: 0
    • Replies: 30586
    • Total: 30586
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

    Add this code there:

    @media screen and (max-width:767px) {
    .logo span.textlogo { font-size:30px !important;}
    .wedd-date h3 { font-size:16px !important;}
    }

    Regards,
    Chris

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