Avatar of danfiggolf
danfiggolf
 asked on

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.
CSSHTML

Avatar of undefined
Last Comment
danfiggolf

8/22/2022 - Mon
danfiggolf

ASKER
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?
ASKER CERTIFIED SOLUTION
Hagay Mandel

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
danfiggolf

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

ASKER
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;
}
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
danfiggolf

ASKER
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.