When I view my basic Foundation 5 website in mobile there is a large spacing issue between the logo and the navigation menu links.
view site here
I'm certain this is due to the fact that I'm using class 'heady' (margin-top: 105px) for desktop to push the navigation menu down to be flush with the large banner image.
Is there a better way to align my menu so it looks good on a mobile device as well? (No whitespace gap from the margin-top style)
Any advice is greatly appreciated!
Thanks
Use a media query to force the margin value.
#media screen and (max-width: 40em) {
.heady {
margin: 0 !important;
}
}
Spacing in between the logo and nav-links is because of the large-6 columns which take up 100% space on small screens.making both the columns stack one after the other.
try this
<div class="large-6 small-6 columns">
<h1><img src="img/rimrock_200x132.png" width="200" height="132" style="margin-top:10px;"></h1>
</div>
<div class="large-6 small-6 columns heady tk-proxima-nova">
<ul class="inline-list right">
<li>Client Login</li>
<li>Contact</li>
</ul>
</div>
and set margin by changing the below css as it makes nav-links align to top
#media screen and (max-width: 40em) {
.heady {
margin: 0 !important;
}
}
Related
I have a site at www. structuredata. com
when the site is on a desktop it looks great. However when it starts to get narrow, the red 'register' button starts to overlap the menu,
I'd like to make a media query in my css that will force the button to drop down below the navigation when viewed on smaller screens. How would I do that?
the header is setup as
<div id="header_main">
<div class="container">
<div class="inner-container">
<strong class="logo"></strong>
<nav class="main_menu"></nav>
<div id="text-8" class="widget"> BUTTON IS HERE </div>
</div>
</div>
</div>
I tried setting my .header_main.widget
to a display:block and inline-block but neither worked. I tried clear:both on it as well.
Media queries can be tricky, you can read a lot about them here(w3c) and here(mdn)
In your case the media query will look something like so:
#media screen and (max-width:320px) {
#header_main .container .inner-container .widget {
/*Styles go here*/
}
}
Hope this helps!
Your navigation bar and your button are on a different z-index, so that's going to be tricky. That's also why clear did not work.
You could set up a media query to adjust the top position of the button (being that it is relatively positioned), like so:
#media screen and (max-width: 700px) /*Or whenever the button overlaps*/ {
#header .widget .avia-button-wrap {
top: 50px !important;
}
}
But then you'll probably have to adjust some other elements in your header to make everything look okay. But this should get you started!
Responsive website with a red (left) column and a blue (right) column. The red column has a black element with margin-top:30px
When the website is resized and the blue column jumps down under the red column, the red column "inherits" the margin-top.. How can this this be avoid?
http://www.bluemachines.dk/_bootstrap/downsize/
It is due to media query used in Bootstrap!
You need to learn media queries for that or if you don't need media queries! Don't use classes of Bootstrap in navigation!
Put this into #media (min-width: 768px) and (max-width: 979px) and it works perfectly.
.nav-collapse, .nav-collapse.collapse {
overflow: visible;
}
.navbar .btn-navbar {
display: none;
}
or
You can also stop the navbar from stacking by changing the
#grid-float-breakpoint variable to 1px
or
Media queries works on browser width for mobile devices u can also specify your style in media query css
#media(max-width:767px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
Here is link for disabling media queries
Try this:
<div class="col-md-4 col-lg-4 col-xs-4 col-sm-4">
Your Content
</div>
<div class="col-md-8 col-lg-8 col-xs-8 col-sm-8">
Your Content
</div>
Give classes for all the screen size, the problem solves!!!!
I have a layout as follows:
<div class="container">
<div class="span9" ></div> <div class="span3" ></div>
</div>
I would like the span9 div and the span3 div to both become span12 divs when the user is viewing the page on a tablet or mobile device, and I would like them to become vertically stacked above on another.
Can this be accomplished and if so how? My current solution relies upon a second set of divs which I show on small browser windows and I hide the above divs.
Using Bootstrap 3, this is super easy:
<div class="col-md-9">...</div>
<div class="col-md-3">...</div>
At typical desktop resolution (> 992px), the divs will be 9/12 columns & 3/12 columns. On anything smaller, they will be 12/12.
Twitter Bootstrap 3 grids
Using Bootstrap 2.3.2, you can add a media query:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.span9, .span3 {
display: block;
float: none;
width: 100%;
}
}
I have this blue top link here and this top is taking all width size, and that's what I want. So if you resize your window or open it on mobile this blue div is putting margins both sides, twitter bootstrap responsive is doing that. My code is exactly like this answer but tb still putting margins, that's my code:
<!-- this div is inserting blue bg image and wrap all content -->
<div class="background-top">
<div class="container">
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
I would use a similar media query to target the top background div as its Bootstrap that seems to be adding the body padding. Give this a go:
#media (max-width: 767px) {
.background-top {
margin-left: -20px;
margin-right: -20px;
}
}
I'm using bootstrap to create a website. I'm trying to create an ordered list that consists of media objects for each item. When I do this, the numbers disappear when viewing on a tablet. However the numbers are there when you view the list from a desktop-browser with the window adjusted to a tablet resolution. How can I get the numbers to NOT disappear when viewing on a tablet?
<ol>
<li>
<div class="media">
<a class="pull-right" href="#">
<div class="span4"><img class="media-object" data-src="holder.js/64x64"></div>
</a>
<div class="media-body">
<!-- Nested media object -->
<div class="media">
blablabla
</div>
</div>
</div>
</li>
As I'm aware of bootstrap's responsive CSS, it doesn't do anything to lists in tablet view so you may be using another css rule somewhere which is hiding list-style for tablet viewport.
Another guess would be that the list-style is set to outside and there's an overflow or something that makes your list-style invisible. Add this line to your CSS file (after loading frameworks and other things) and see if it fixes the problem for you.
#media (min-width: 768px) and (max-width: 979px) {
ol { list-style: decimal inside; }
}