Solved

Jquery Mobile Margin Configuration

Posted on 2013-01-05
5
197 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

679 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