Site mobile display problem

[RichardPD]

Hi
My site is not displaying properly on my iphone in portrait orientation, where it appears not to be full browser width.
There is empty space along the right side (almost as if room for a sidebar but there is no sidebar). The site displays fine in full width on mobile landscape orientation.

The site is a custom genesis child theme of the Genesis sample theme with a custom homepage template page.

I do not know why there is this problem and am grateful for help to fix the site to be fully mobile friendly.

The site is Chess Rating Rise (CRR) : Chess Rating Rise (CRR)

I am very grateful for helpful replies with advice on how to fix this and look forward to some help. Many thanks

http://www.chessratingrise.co.uk

[Ginger]

Hi Richard,

When I view this on an iPhone 5 width, I'm seeing this go off screen, not sure that is what you are asking about though. You have a couple of places that are exceeding the screen width of 320px. BTW, to investigate this I'm using Inspect Element, highlighting different things and checking the styling applied to see what goes off the screen.

Your title-area has what appears to be some inline styling with a width of 420px that is causing it to go off screen.

<style id="custom-css-css">.title-area{float:left;width:420px}</style>

Then further down on your homepage, you have some padding-left: 44px that is pushing the text off the screen.

.Standard_Gen-landing ul li {
	background: url('images/1.png') no-repeat;
	margin-bottom: 4px;
	padding-left: 44px;
}

If both of these are corrected, the content will fit nicely on an iPhone 5 or iPhone 6 screen. Hope this helps!

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[RichardPD]

Thanks Ginger Coolidge for your very helpful reply.
I have edited the style code as you indicated but I cannot edit the inline html code!
I can see this code in Firebug and Inspectore WebDevTools and edit it there but those changes are
only temporary.
I cannot find this code anywhere in my theme .php pages?!
Very baffling..is there a way to make permanent edits on the fly in the browser?
I am bamboozled and would greatly appreciate a little more help please!
Many thanks 🙂

[Ginger]

Hi Richard,

All I can think of is are you using the Custom CSS portion of JetPack or another Custom CSS plugin? If not, are you using a plugin that does something with the header ? It's specifically targeting the title-area.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[RichardPD]

Hi Ginger
Thank you so very much for your help.. I have found where that CSS rule came from, although I do not know how it works!

So in the WP Dashboard >Appearances>Edit CSS

I had added this:

/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/
.title-area {
	float: left;
	width: 420px;
}

I edit this to width: 50%; and this displays better in mobile responsive iphone view..
I have no idea where I got the idea to add this CSS and I have no idea how the HTML is added?!
The odd thing is I did this but have forgotten how I did it!
The theme I call Standard_Gen_theme and my code is a mess!
Copied from WP Editor...
Templates

This child theme inherits templates from a parent theme, Genesis.

CRRSalesPagebasedonLandingPage Page Template
(CRRSalesPage_template.php)
Standard_Gen_Landingpage Page Template
(Standard_Gen_Landingpage.php)
Theme Functions
(functions.php)
home.php
LandingPage Page Template
(page_landing.php)

Styles

Stylesheet
(style.css)
style_1.css
Standard_Gen Theme: Stylesheet (style.css)

/*
	Theme Name: Standard_Gen Theme
	Theme URI: http://de.richard-dickinson.com/
	Description: A mobile responsive and HTML5 child theme built for the Genesis Framework.
	Author: Richard Dickinson @ http://de.richard-dickinson.com/
	Author URI: http://www.richard-dickinson.com/

	Version: 2.0

	Tags: black, white, one-column, two-columns, three-columns, fixed-width, custom-menu, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready

	Template: genesis
	Template Version: 1.0

	License: GPL-2.0+
	License URI: http://www.opensource.org/licenses/gpl-license.php 
*/

How did I add that inline style in the head with that css rule & where did I add it ? I can't remember!!! AAAAARGH...
(was it in theme functions or one of the custom landing or salespage templates? I do not know as I cannot see it included anywhere in any of those?!).
I would really love to get this site sorted so it looks good on all devices!
I may just have to accept this as it is an improvement but it still seems ugly to me especially as it is my coding!
I haven't got enough Genesis and mobile responsive coding experience to cope with this.
Any feedback gratefully received. Again many thanks 🙂

[Ginger]

Hi Richard,

Don't beat yourself up, this is how we all learned 🙂 I would take out the custom CSS for that title-area altogether, you don't need it. When I uncheck it in the browser, it looks fine.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[RichardPD]

Hi Ginger,
Thank you so much for your help and support.

If I remove this css, then I get the title not displaying inline in desktop view nicely.
Eg instead of: CHESS RATING RISE CRR
it shows as: CHESSRATING RISE
(CRR)
This breaks onto 2 lines and I do not want that.

If I leave it in, the title is not displaying nicely in mobile portrait or landscape responsive view!

Grateful for help to fix this pesky responsive title! Many thanks 🙂

[Ginger]

Hi Richard,

Ok, the answer is to add CSS to cancel out the 50% width for the .title-area when you site is viewed on a mobile phone device. If you'd like to continue to use this Custom CSS area for simplicity, add this below what you have and it should correct the problem:

@media only screen and (max-width: 414px) {

    .title-area {
	width: 100%;
    }
}

}

I use iPhone screen widths so the iPhone 6 Plus is 414 px wide so it should cover it and the narrower iPhone 6 and iPhone 5 screens. Of course you can adjust that number above if you like.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[RichardPD]

Hi Ginger
That is getting much better now! Thanks.
My only issue is how the title does not display full width with the phone in landscape orientation.

In landscape I have the title as:
CHESS RATING
RISE (CRR)

(should be on one line to the phone max width size).

Is there a fix for that please? So, nearly there and sorted. I hope you can help solve this finally.
Thanks and best wishes

[Ginger]

Hi Richard, just build on what you inserted previously, using a width for a phone that is in landscape.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[RichardPD]

Yes.
The iphone code from CSS tricks works for me.
Link: Media Queries for Standard Devices

There is a lot to mobile responsive design!

[Author]

Posts