Wedding Pro Theme – Mobile Text Header Size

[Carolee]

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

[Sonl Sinha]

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

[Carolee]

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

[Sonl Sinha]

Hi,

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

Regards,
Chris

[Carolee]

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

[Sonl Sinha]

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

[Carolee]

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!!

[Sonl Sinha]

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

[Carolee]

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;}
}

[Carolee]

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

[Sonl Sinha]

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

[Author]

Posts