Adobe Community: Mobile content div contracts from header photo

3,738 posts
Oct 15, 2010

Currently Being Moderated

1. Sudarshan Thiagarajan,

Sep 22, 2012 10:50 PM in reply to brightbelt

Report

Can you post a screenshot of the area that you want resized? I'm sorry I fail to understand what you mean by 'content' div. Is it just the area after navigation or is it the entire container?

|

Mark as:

Currently Being Moderated

2. brightbelt,

Sep 23, 2012 1:02 AM in reply to Sudarshan Thiagarajan

Report

Yes, I am sorry. The div name is '#left'. (I'm more used to using the name 'content' but this one is different). It is right after the navigation.

Here is a screenshot through the iOS Simulator. Thanks for responding.... Now I've also got a problem of the header being cut off on the right. I have no idea what is causing that. Thanks....

|

Mark as:

3,738 posts
Oct 15, 2010

Currently Being Moderated

3. Sudarshan Thiagarajan,

Sep 23, 2012 1:30 AM in reply to brightbelt

Report

Can you crop your header image to just hold Larry Parrish and replace the CSS for mobile CSS header background?

.container #header {
height: 80px;
width: 100%;
background-image:url(Larryheader3-resized.png);
background-repeat:no-repeat;
background-position:top left;
background-color: #000;

Regarding the #left area, your width is set to 70% in main CSS. Your Mobile CSS width for #left, make it 95% and add !important to your parameter.

|

Mark as:

Currently Being Moderated

4. brightbelt,

Sep 23, 2012 3:48 AM in reply to Sudarshan Thiagarajan

Report

Thanks Sudarshan!

I did mention that I had tried putting in a smaller re-sized image but apparently the '!important' property really makes a difference and I hadn't used that before.

I'm still trying to fill out that empty space on the right. Thanks again for your help.

Frank B.

|

Mark as:

3,738 posts
Oct 15, 2010

Currently Being Moderated

5. Sudarshan Thiagarajan,

Sep 23, 2012 6:46 AM in reply to brightbelt

Report

Found the culprit.

For mobile layout, mobile.css, #left, change width to

width: 85% auto;

For main layout, in your html inline CSS,

.container #nav ul {
margin: 0px;
font-size: 12px;
font-weight: bold;
overflow: hidden;
width: 100% auto;
font-family: arial, helvetica, sans-serif;
text-align: center;
}

This should fix the extra space on the right side.

|

Mark as:

Currently Being Moderated

6. brightbelt,

Sep 23, 2012 8:52 AM in reply to Sudarshan Thiagarajan

Report

Thanks Sudarshan, that helped but it didn't really fix the right side. I've copied my #nav css over to the mobile.css file to tweak it.

But I did one troubleshooting thing that clarified things maybe. I test-switched my media query to an empty css file and the right side still had that cut off effect !!

So I think it's the main template at fault somewhere or both as you've suggested.

I'll keep plugging at it. I appreciate your help thus far.

Also, I had to do some major dialing down on the left/right padding in the <#nav ul li a> area on the mobile.css file because those width changes were knocking one of my links onto a second line.

http://www.larryparrishpiano.com/Templates/LarryTemplate4.dwt

Frank B.

|

Mark as:

Dreamweaver CC

Mobile content div contracts from header photo

Sep 22, 2012 5:12 PM

More Like This

Bookmarked By (0)

Answers + Points = Status