Solved

Jquery Mobile Margin Configuration

Posted on 2013-01-05
5
196 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.
0
Comment
Question by:danfiggolf
  • 4
5 Comments
 

Author Comment

by:danfiggolf
ID: 38748036
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
 
LVL 16

Accepted Solution

by:
HagayMandel earned 500 total points
ID: 38748108
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
 

Author Comment

by:danfiggolf
ID: 38749346
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
 

Author Comment

by:danfiggolf
ID: 38749381
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
 

Author Closing Comment

by:danfiggolf
ID: 38749524
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

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Javasctipt 2 25
How to make a moving character 3 57
Changing alignment and creating border 6 28
Underline in nav for the page that you are currently on. 1 8
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question