We help IT Professionals succeed at work.

Jquery Mobile Margin Configuration

danfiggolf
danfiggolf asked
on
228 Views
Last Modified: 2013-01-06
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.
Comment
Watch Question

Author

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?
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

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;
}

Author

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;
}

Author

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.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.