Issues with Responsive Text

creativemindsdesigners · September 2015

Hi all,

I was hoping I could get some answers to some issues I'm having with a website I recently produced. It isn't displaying as I'd like on mobile devices and I'm experiencing the following issues:

Text not scaling down to fit an iPhone screen
Images not scaling down to their bindings. For example, I have a div with a black background and an image in the centre of it. When displaying on an iPhone, the div scales down but the image doesn't and is therefore being cut off at the sites by the smaller div.

Is there any custom code I can add to make these elements scale properly?

Thanks!

Albert · September 2015

Hi,

1. If font size does not scale down, it means you forgot to activate option responsible for fonts under Theme options > Responsive section.

2. Any url to page where this happen?

numero7 · September 2015

Hey same problem for me, i've activated the decrease font size but there's no changes. the image are well scaled but my text not. I'm using a custom class for the h2.

edit, apparently it's because i set my custom h2 font size in pixel... should i set it in em or % to make it scalable ?

Albert · September 2015

@numero7 If you set own size for h2 tag, then this option won't work. In this case, you must play with right @media only screen attributes for different screen sizes.

numero7 · September 2015

okay thanks

Albert · September 2015

You're welcome!

creativemindsdesigners · September 2015

Thanks for the response,

That option was already turned on, but here's the site http://www.energy4you.co.uk/

Thank you

Albert · September 2015

@creativemindsdesigners As we see, all images scale down on smaller screens. Please show us on screenshot which images does not scale down then because we do not see anything wrong. But in accordance to "Decrease fonts" option, that we mentioned above, how can you say that you activated this option while you use very old (6.1) version which does not have this option? How is that possible?

creativemindsdesigners · September 2015

Hi,

Sorry about that. I thought you were referring to the General>Responsive option which is switched on, my apologies.

I'm afraid I myself have only just taken on this site from someone else and am very much getting to grips with all its settings.

I am happy to update the theme to its latest version; is there any chance of this affecting the content or functionality of the website?

Thank you

Albert · September 2015

If you did not modified any theme files, then you won't lose any settings or content because all of them are stored in database. More details about theme update you can read on http://forum.muffingroup.com/betheme/discussion/13/how-update-to-the-new-version-of-be-theme

creativemindsdesigners · October 2015

Thank you for this,

I've updated the theme to the latest version but my text is still refusing to scale in mobile view. This results in many words continuing off the edge of the page.

Do you know why the text isn't reducing?

Albert · October 2015

@creativemindsdesigners Which texts are not scaling down on mobile devices? Because we checked your site and looks like everything looks good.

creativemindsdesigners · October 2015

I'm working through the settings put in place by the last person to work on the website and it turns out it wasn't scaling because they had set specific text sizes for text within the content box.

I have another issue though! The person who build the website added the background images by using the Custom CSS box at the bottom of each page

e.g. html {

background-image: url("http://www.energy4you.co.uk/wp-content/uploads/2015/08/large-white.jpg");

}

This background image doesn't display when I view the site on an iPhone but it does display when I view it on an iPad.

Is there either an easier and more responsive method of uploading background images or is there a way I can make the current background not display when viewed on an iPad?

Thanks!

Albert · October 2015

Some background images just does not work on mobile devices and this is proper behave. There is unfortunately nothing what you can do because css backgrounds and responsive technology are just incompatible together.

creativemindsdesigners · October 2015

I thought that might be the case, never mind then! Thank you for all your help and for an overall great theme!

Albert · October 2015

You're welcome

OmarMacias · October 2015

Thanks, just read this and helped my problem. Thanks a lot!

Issues with Responsive Text

Comments