Responsive Issues

grantmorschel · December 2015

Hi - I've just started work on another website using the fantastic BeTheme! I'm using the 'Vision' demo content, and am having a few problems viewing the site on mobile devices:

My site is here - http://www.webfactory.com.au/testsites/svcounselling
Screenshot of iPhone is here - http://pasteboard.co/msll3LD.jpg

1. I'm not seeing the horizontal lines for mobile menu on either iPad or iPhone
2. On iPhone the logo is too small - is it possible to fill the space?
3. On iPhone the headings aren't reducing in size, just having the right hand side cut off
4. On iPhone the buttons don't look great - don't seem to be responding to size change.

I've only completed the Home page at this stage. Any advice you can offer would be greatly appreciated. There was already Custom CSS in that field when I downloaded the demo content, so I'm not sure if that is affecting the missing menu?

Regards
Melanie

grantmorschel · December 2015

Also just wondering if it's possible to reduce the font size of Fancy Headings? The 'Phone Newcastle Hypnotherapy' text is too large for iPad mini - if there's a way to reduce overall that would be great. Thanks!

Albert · December 2015

Hi,

1. You do not see responsive menu icons because it is the same color as background. You can change it's color with extra css:

#Top_bar a.responsive-menu-toggle { color: #FFF !important; }

2. If you want, you can only remove padding for logo on mobile:

@media only screen and (max-width: 767px) {
    #Top_bar .logo #logo { padding: 0 !important; }
}

3. You can break lines for headings:

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

4. Which buttons are not responsive exactly? Because we do not see anything wrong.

grantmorschel · December 2015

Thank you for your always prompt response to my questions.

Unfortunately Item 2 hasn't made any change - the logo is still very small on iPhone, with a large section of block color below. Screenshot here - http://pasteboard.co/nvz7S1J.jpg

Thanks for the code for Item 3, but I'm not happy with the word wrap option - it's very hard to read words that are cut in half. Is there a reason the text doesn't reduce in size on on mobile devices? I would have thought that was the point of responsive design?

With regards to the Buttons, screenshot is here - http://pasteboard.co/nvJg8xd.jpg I'd like to be able to reduce the size of the Fancy Heading font "Phone ..." and also is it possible to have the font size of the buttons reduce on iPhones so it displays alongside the icon as it would on all other devices. Doesn't look great in this format.

Would I be better to utilise the 'Responsive Visibility' feature you
have in Muffin Builder and build different elements for different mobile
devices? I haven't used this before, but I'm concerned some of the
elements from this demo content don't work well on iPhone (such as the
header http://pasteboard.co/nwarijb.jpg)

Thank you again - I realise getting these themes to look great on a variety of devices is hard work, but so many people are viewing these sites now on mobile devices that I think we need to work hard to ensure they look good across a range of devices.

Regards
Melanie

Albert · December 2015

2. We did a mistake in this css. Instead of padding, should be margin:

@media only screen and (max-width: 767px) {
    #Top_bar .logo #logo { margin: 0 !important; }
}

3. Maybe you forgot to activate Decrease Fonts option under Theme options > Responsive section?

4. Responsive Visibility option may be a good decision in this case. However, Decrease Fonts option we mentioned above, should help you to decrease fonts on mobile devices.

grantmorschel · February 2016

Hello again - I sorted most of these items out, but I'm building another website for the same client in the same style, and still having a few responsive issues along similar lines:

1. Logo is displaying very small on iPhone and iPads, as per screenshot here http://pasteboard.co/1fby1tMo.jpg

2. I have used the 'Responsive Visibility' feature to reduce the size of some elements (as the 'Decrease Fonts' option didn't work for everything) but have a lot of excess white space above and below the heading at the top of the page (please see screenshot) - is there a way to reduce this on smartphones?

3. I've also noticed when viewing on a smartphone there seems to be a margin so everything is narrower than the block of color at the top of the page, making it quite difficult to read. Elements such as FAQ are especially hard to read - http://www.webfactory.com.au/testsites/sv/frequently-asked-questions/ Screenshot here - http://pasteboard.co/1fchpqCt.jpg Text also isn't displaying the same size for lists within the FAQ on this page.

Any assistance you can offer would be greatly appreciated. I think your theme is terrific, and the number of Demo Content layouts you have available is amazing! I'm sure I will buy this theme many times over.

Regards
Melanie

Albert · February 2016

1. It's small because your logo by default is really large and must be scaled for mobile devices. What you can do is use different logo for mobile devices.

2. Please show us on screenshot what you mean exactly and include the link to page where you got these spaces.

3. This is how this item works. What you can only do is remove some stuff from the left side on mobile with extra css:

@media only screen and (max-width: 767px) {
    .faq .question .title .num { display: none !important; }
    .faq .question .title { padding: 20px !important; }
    .faq .question .answer { padding: 20px !important; }
    .faq .question::after { display: none !important; }
    .faq .question::before { display: none !important; }
}

grantmorschel · February 2016

Thanks for your reply

1. Sorry but I don't understand the point
about the logo. Is it not possible to have it fill the width of the
green header box seen in this screenshot?
http://pasteboard.co/1fby1tMo.jpg I've tried uploading a smaller
version of the logo, but it just does exactly the same thing.

2.
Screenshot is here http://pasteboard.co/1fby1tMo.jpg Is it possible to
remove the white space above and below header text just on smartphones
(on this page 'Medicare Programs"
http://www.webfactory.com.au/testsites/sv/medicare/ ) - looks fine on
tablets so nothing to change there.

3. Thank you. Is there a way
to have the list text appear the same size as rest of content text? I've
had this come up a couple of times before - I'm not sure why this is
the default styling?
http://www.webfactory.com.au/testsites/sv/frequently-asked-questions/

Regards
Melanie

Albert · February 2016

1. Yes, it is not possible. Just think. Logo is very wide, right? And logo must be scaled properly, right? In height and width. You can not increase it's height only and leave the width.

2. The padding was added locally for section, so it's not possible to change it's height on mobile only.

3. Yes, you can do this with the following css:

.column_column ul, .column_column ol, .column_visual ul, .column_visual ol, .mfn-acc ul, .mfn-acc ol, .ui-tabs-panel ul, .ui-tabs-panel ol, .the_content_wrapper ul, .the_content_wrapper ol { font-size: inherit !important; }

grantmorschel · February 2016

Hi again - with regards to Point 1 above, I'm not trying to stretch the logo in only one direction, I'm just trying to make it fill the available space. There's a huge block of colour and a tiny logo - surely there is a way to stretch both height and width to fill the space?

Screenshot for iPhone http://pasteboard.co/1uENncOF.jpg

Regards
Melanie

Albert · February 2016

You can try to use the following css then:

#Top_bar .logo #logo { margin: 0 !important; }

grantmorschel · February 2016

Thank you - that has helped.

Albert · February 2016

You are welcome

Responsive Issues

Comments