header text widget on mobile

Tagged: header text widget on mobile

This topic has 7 replies, 2 voices, and was last updated 9 years, 9 months ago by Wes.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
July 21, 2014 at 10:55 pm #13180
tjd
Customer
Hello again from an continually overcast Tokyo.

On my mobil site, as seen on my iPhone4s, the Header text widget drops below the header and to the extreme left side of the screen with no space between the text and the edge of the screen. It is readable but I’ve often wondered(way-pre-genesis upgrade) if I could readjust it. It may not look like that on every device but it does on mine in both portrait & landscape. Ideas to adjust it?
http://www.tomjdolan.com
Thanx
July 22, 2014 at 2:57 pm #13205
Wes
Moderator
Have a look around line 2325 and change it to look like this instead –
```
#header .widget-area {
	float: none;
	margin-bottom: 20px;
	padding: 0 20px 10px;
}
```
It should be located under this section –
```
/* Responsive Design
------------------------------------------------------------ */

@media only screen and (max-width: 600px) {
```
July 23, 2014 at 1:59 am #13222
tjd
Customer
Hi Wes,

Wes,
Thanx for your response. Well I went to the area you indicated and adjusted the information this way:

#header .widget-area {
float: none
margin-bottom: 20px;
padding: 0 20px 10px;

The result is: the widget text, on my iPhone, moves down below the screen, one-half a line, and to the left, off the screen, 2 letters.

So I was gonna play with the numbers but thought better of it. What’s the thing to do?

Tom
July 23, 2014 at 6:13 pm #13230
Wes
Moderator
Did you change anything else after I first looked at it? Because the above code worked perfectly when I tried it, but I’m not sure what was changed to know where to look. Something is conflicting with that section.
July 23, 2014 at 7:18 pm #13235
tjd
Customer
Morning from Tokyo Wes,

Phone was off all nite and here’s what I can give you to work with this a.m.:

I have never needed to fiddle with the Mobile part of the Legacy CSS until I put in the code you sent. I put the code into the are below this Line:

/* Responsive Design
———————————————————— */

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

And it now reads:

}

#header .widget-area {
float: none
margin-bottom: 20px;
padding: 0 20px 10px;

I did see that further down the code there is this line:

@media only screen and (min-width: 600px) and (max-width: 960px) {

And below it, this line:

#header .widget-area {
margin-bottom: 20px;
padding: 0 0 10px;

Should they be the same settings or not…. As you know, I don’t have a clue.
Maybe I should reset the upper to the original setting?

Let me know. I’ve just checked my phone after it was sitting off overnite and the Pages render perfectly side-to-side in Landscape, as does the Header Navigation. The issue is only with the Header Widget.

Thanx Wes.
July 25, 2014 at 11:39 am #13260
Wes
Moderator
You have an error in your code. If you look at your code above you’re missing a ; which is supposed to go after the float: none.
July 25, 2014 at 8:12 pm #13265
tjd
Customer
Hi Wes,

Thanx for taking the time to respond and correct my lack of attention to detail in the code. It is a bit off since I haven’t been in the editor for quite awhile. I’ll be attentive in the future. Hope you’re having a pleasant summer… Tom
July 25, 2014 at 8:35 pm #13266
Wes
Moderator
No problem, Glad everything is working 🙂
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.