Responsive Issues

grantmorschel · October 2015

Hello again - just starting to test my site http://www.webfactory.com.au/testsites/hunterstay/ on different mobile devices and have come across a couple of issues I'm hoping you can help me with:

1. On pages where I've used the Fancy Heading element in Muffin Builder the text is being truncated when viewing on iPhone, as per screenshot http://pasteboard.co/1zZfiPRe.png Is there any way to fix this? Is it possible to have this text reduce in size on a smartphone? I have selected the 'Decrease Fonts' section under Responsive in Theme Options.

2. Some of the longer buttons with icon aren't adjusting well on smartphone, as per screenshot http://pasteboard.co/1A044dmC.png Is there any way to fix this?

3. The text used in the Header Banner section (with magazine Header layout) isn't spaced correctly on smartphone, as per screenshot http://pasteboard.co/1A0wJ0S5.png Is there any way to fix this?

4. Is there any way to reduce the white space being utilised for the header area on smartphones? Is there a reason the logo doesn't display full width on smartphones? I tried uploading a larger version of the logo in the Responsive section of the Theme Options, but it didn't have any effect.

I look forward to hearing from you.

Regards
Melanie

Albert · October 2015

Hi,

1. We did checked your site and this heading is not cut for sure. However, if you want, you can use below css to wrap texts:

h1, h2, h3, h4 { word-wrap: break-word !important; }

2. The text on the button is too long and that's why it does not look good on mobile. You need to remove the button's icon on mobile devices. You can do this with below css:

@media only screen and (max-width: 767px) {
    a.kill_the_icon .button_icon { display: none; }
}

3. You can fix it with below css:

.banner_wrapper h2 { line-height: 50px !important; }

4. To reduce white space on mobile devices in header and reduce logo size, please use below css:

#Top_bar #logo img.logo-mobile { width: 220px !important; }
#Header .top_bar_right { display: none !important; }

grantmorschel · October 2015

Thank you for your always prompt reply! I'll implement these changes in the morning and hopefully all will be good (night here in Australia!) is it possible to reduce the size of the Fancy Headings on mobile devices? They display very large in proportion to the rest of the text on the page.

Regards
Melanie

Albert · October 2015

To decrease font sizes on mobile devices, we recommend to use "Decrease fonts" option which is under Theme options > Responsive section.

grantmorschel · October 2015

Thanks - I do have the "Decrease Fonts" option selected, but it isn't working on the Fancy Heading element in Muffin Builder. Even if I adjust the H1 and H2 font size in WP Admin Fancy Headings don't change. I implemented the wrap CSS code, but really that just looks silly - http://pasteboard.co/1BbOr8uR.png Is there any other way to decrease the font size of Fancy Headings on mobile devices?? Otherwise I think I'll have to look at other options. Mobile usage is so high on these travel sites now that I need to get it right.

Again, I appreciate your time in helping address these issues.

Regards
Melanie

ecegrell · October 2015

I have experienced the same problem. I also have the "Decrease fonts" option selected.

Albert · October 2015

@grantmorschel If this option does not work for "Fancy heading" then we must have a look on it closer. However, at this moment, you can use below css to decrease this font size on mobile devices:

@media only screen and (max-width: 767px) {
    .fancy_heading .title { font-size: 10px !important; }
}

@ecegrell Please use the css we left above and this should do the trick.

grantmorschel · October 2015

Perfect! Thank you again for your time, and if you could look into a permanent fix for Fancy Headings and the Decrease Fonts option that would be great.

Regards
Melanie

Albert · October 2015

Sure, we'll of course.

Responsive Issues

Comments