Community Forums › Forums › Archived Forums › Design Tips and Tricks › Site displays with problems on iPhone 6
Tagged: display problem, iphone 6
- This topic has 10 replies, 2 voices, and was last updated 8 years, 3 months ago by Tom.
-
AuthorPosts
-
January 5, 2016 at 9:34 pm #175705ACEkinParticipant
Pretty much everything is working as expected on the following site except when it is viewed on an iPhone 6 in portrait orientation. Then, the content area squishes to the right and a dark panel covers the right side. I tried it on two different iPhone 6 and they both have the same problem. Is it a Retina display issue? Is there a fix for it? See the image at the link below.
https://copy.com/KVkVRnsDpFf8lPVI
Thank you.
Cemal
http://www.psri.usJanuary 5, 2016 at 11:29 pm #175711TomParticipantHi,
This is due to a snippet of CSS you've added for your wider text title. It looks like you're using the Custom CSS feature of Jetpack and have added there this snippet ...
.title-area { width: 600px; }
... which is placed inline and overrides a necessary part of the media query for smaller devices. You should be able to correct this by adding the following snippet to the bottom of the custom CSS area.
@media only screen and (max-width: 1023px) { .title-area { width: 100%; } }
( PS: you've got a typo in the first sentence of your "About PSRI" page that shows in the excerpt on the front page. )
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]January 6, 2016 at 8:02 am #175737ACEkinParticipantThank you Tom. The title area and widget area were allocated 300 and 720 pixels respectively. I added 300 to the first and subtracted 300 from the second to make the title spread on one line. Apparently the behavior of the responsive theme is not allowing that. I replaced the CSS snippets with what you provided but that is not changing the behavior of the title area which used to wrap and still does. I will leave that part alone, the way it was written by the coders until i find a solution that allows extending the title to one line. I have not yet asked someone to look at it on an iPhone 6, I will report after I get it checked.
I could not find the typo in the sentence, even the spell checker in WordPress edit screen did not report anything. But thank you for making me check again.
Cemal
January 6, 2016 at 9:37 pm #175817TomParticipantYou can have the title on a single line.
With the title-area change now removed from the custom CSS plugin/module, in your child theme stylesheet, style.css:
at line 965, change 300 to 600
.title-area { float: left; padding: 0; width: 300px; }
at line 1025, change 720 to 420
.site-header .widget-area { float: right; text-align: right; width: 720px; }
The typo: "or Rhode Island" should be "of Rhode Island"
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]January 6, 2016 at 9:43 pm #175819ACEkinParticipant"Or" my aching eyes! I did not write that page but you have eagle eyes, thanks. I will fix it.
I will wait to hear from the iPhone 6 owner before making these changes so that I have a valid experiment. I will report as soon as I hear. Thank you, I appreciate your assistance. One thing that concerns me though is the change in the actual child theme CSS file. If there is an update I will likely lose the change. Is the problem related to using JetPack custom CSS? I can easily create my own and load that to Genesis.
Cemal
January 6, 2016 at 9:57 pm #175821TomParticipantThere is really no need to apply a new(er) version of a StudioPress child theme. They are not automated nor even announced. Just don't make changes to the Genesis theme (i.e. the Genesis Framework). Any edits made to the Genesis theme will be overwritten when the theme is updated, which can be toggled to run automatically.
You should be able to use the Jetpack as long as these changes are made together in the same module. In that case, include the media query at the bottom of the Jetpack CSS file.
@media only screen and (max-width: 1023px) { .title-area { width: 100%; } }
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]January 7, 2016 at 10:21 am #175857ACEkinParticipantHello Tom, I am writing to report that the following snippet, inspired by your directions, seems to have resolved the issue. Of course I have not yet tested this on an actual iPhone 6+ but on a simulator online. Thank you,
Cemal
Note: I swapped the width for the two areas and added the widget-area class to the closing snippet to make that center on narrow screens, without it the icon was floating right and looking odd. When I hear from an actual iPhone 6+ user I will report once more.
.title-area {
float: left;
padding: 0;
width: 720px;
}.site-header .widget-area {
float: right;
width: 300px;
}
@media only screen and (max-width: 1023px) {
.title-area, .site-header .widget-area {
width: 100%;
}
}January 7, 2016 at 12:02 pm #175868TomParticipantLooks good on my iPhone6!
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]January 7, 2016 at 12:03 pm #175869ACEkinParticipantAh, good to know that it passed the real test. Thank you for all your help.
Cemal
January 9, 2016 at 2:03 pm #176074ACEkinParticipantAll is well on my side as well. This should provide a nice short tutorial for anyone trying to change the width of the title and widget areas. Thanks for sharing your knowledge Tom.
Cemal
January 9, 2016 at 6:39 pm #176091TomParticipantYou're quite welcome, Cemal.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ] -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.