Jquery Mobile Margin Configuration

I'm not having luck using Firebug in making the CSS change in the Our Menus page - http://test2.dfigdesign.com/?page_id=2
to move the Main and it's Content up and to the left.  
<div id="main" class="ui-content" data-role="content" role="main">

Open in new window

<div id="content" role="main">

Open in new window

I'm trying to learn how to layout within the smartphone limited space.  There is a large gap from the Nav bar menu and the content below it.  As well, the content needs to shift to the left.
danfiggolfAsked:
Who is Participating?
 
HagayMandelConnect With a Mentor Commented:
The gap comes from 3 different css rules all in styles.css:
Line # 754:
.entry-content, .entry-summary {padding: 1.625em 0 0;}

line #1085:
.singular .hentry {border-bottom: none;padding: 4.875em 0 0;position: relative;}

line #1090:
.singular.page .hentry {padding: 3.5em 0 0;}
0
 
danfiggolfAuthor Commented:
I was able to maximize the width for the <div id="main" class="ui-content" data-role="content" role="main"> .
 Your help please in understanding the CSS needed to reduce the space between the content and the nav-bar?
0
 
danfiggolfAuthor Commented:
I tried this CSS in the child style.css with still no significant reduction of the space between the Navigation Bar/Menu and the title/start of a blog posting.  I've added to my child theme the code below:


.entry-content, .entry-summary{
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-top: -30px;
}

.singular.page .hentry {
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-top: -30px;
}

.singular .hentry {
border-bottom: medium none;
padding: 0;
position: relative;
margin-top: -30px;
}
0
 
danfiggolfAuthor Commented:
I found this - WordPress 3.x – Twenty Eleven 1.x tweaking @ http://timuryn.com/internet/twenty_eleven that has the following direction, but it still leaves the space:

Delete excess space between menu and title text.

Enter Appearance ¿ Editor at right column make click on file Stylesheet (style.css), find stroke .singular .hentry and .singular.page .hentry, do as it showed in next example, here it is just an example so depend on your wishes you can customize it:

.singular .hentry {
border-bottom: none;
padding: 1px 0 0;
position: relative;
}
.singular.page .hentry {
padding: 1px 0 0;
}
0
 
danfiggolfAuthor Commented:
I applied your settings which brings the content up.  Now I need to figure out how to use z-index correctly to expose the green tab image Legends.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.