I'm new at this and let me know how to hide the menu icon , and it adds automatically without being prompted, i want only to display on small screens. Sorry for the bad English.
Thank You.
I had to resort to a Media Query to solve my problem.
#media only screen and (min-width:851px){
.mdl-layout__drawer-button {
display: none;
}
}
It is the best solution I've found, thanks to #dshun and #garbee for help.
Another way of achieving this, is to add the various screen size classes, such as mdl-layout--small-screen-only. Here is an example:
<div class="mdl-layout__drawer mdl-layout--small-screen-only">
<span class="mdl-layout-title">Drawer Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link 1</a>
<a class="mdl-navigation__link" href="">Link 2</a>
<a class="mdl-navigation__link" href="">Link 3</a>
</nav>
</div>
My apologies if that snippet doesn't work well for you. I just noticed a similar question here on StackOverflow, the solution there may be more proper: How can I hide drawer on large screens and show just on small screens.?
mdl-layout--no-desktop-drawer-button
Does not display a drawer button in desktop mode, goes on mdl-layout element
Here is an example of the same:
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button">
You can use the mdl-layout--fixed-drawer on the same element you use mdl-js-layout to get a fixed drawer on desktop which should remove the button to view it and leave it open all the time for access.
The effective solution I found and that finaly works is :
<style>
#media screen and (min-width: 992px) {
.mdl-layout__drawer-button {
/* Hide the Hamburger button but will leave an unused space */
display: none;
}
.mdl-layout__header-row {
/* so important to make sure the Hamburger button didn't leave an unused space */
padding-left: 24px !important;
}
}
</style>
To hide div in large screen please add this class
hide-on-large-only
Related
So I have the following desktop layout (which I am completely satisfied with):
This is my attempt to make it mobile:
I like the horizontal scroll here, but I feel that the cards are too thin; I would like to stretch my card to be more box-like (square). Ideally, the card is big enough to fill the gap between the header and the footer without causing
HTML:
<div class="page-content">
<div class="card-deck" fxLayout.xs="row" style="overflow: scroll; height:100%">
<md-card style="width:10rem;" *ngFor="let make of filteredMakes" (click)="goToModels(make.niceName)"
class="page-card mat-card">
<img md-card-image="" src="assets/img/gallery/brands/256/{{make.name}}.png" class="mat-card-image" />
<md-card-subtitle class="mat-card-title text-center">{{ make.name }}</md-card-subtitle>
</md-card>
</div>
</div>
I've tried many css tricks and tried using flexbox, but there must be something I'm missing (media queries perhaps, and how to override them).
How can I make the following styles apply ONLY to mobile?
min-height: 375px;min-width: 278px;
If anyone has any direction on how to accomplish this design, it would be greatly appreciated.
In order to get a different style for mobile, we do this:
#media (max-width: 600px) {
md-card {
min-width:17rem;
}
}
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!
This is incredibly simple yet driving me bonkers!
I'm working on a Wordpress theme and using the plugin Shortcodes Ultimate which bases its styling on the Bootstrap library. I am a beginner when it comes to Bootstrap and needed some help rearranging elements on a mobile/tablet device (<770px).
Basically what I'm looking to do is have the <h2> and <p> on the left side of the screen on a desktop version and the <img> on the right (which they are already).
When the viewport width is <770px I would like to have the <img> on top of the <h2> and <p>. But what currently happens is the opposite of this :(
[div]
[div]
<h2>Our Roots</h2>
<p>Some text</p>
[/div]
[div]
<img src="some-image.png">
[/div]
[/div]
Move the img div higher and use pull-right to float it to the right side for desktop views.
You can use #Media calls and create custom CSS for each of your situations and use the pull-left and pull-right classes for you first situation.
Thanks everyone for the responses, still learning bootstrap. What I did was this and it worked perfectly:
[div]
[div]
<img src="some-image.png" class="mobile">
<h2>Our Roots</h2>
<p>Some text</p>
[/div]
[div]
<img src="some-image.png" class="desktop">
[/div]
[/div]
I basically just placed the image twice and applied this CSS:
.mobile {
display: none;
}
#media screen and (max-width 770px) {
.mobile {
display: block;
}
.desktop {
display: none;
}
}
Still learning :)
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;
}
}
I try to use bootstrap affix (2.1.0) in one of my mvc4 project.
It seems that .span3 and .span9 doesn't work properly if, after scrolling 50px, the .span9 content move to the left.
I found this: Text moves to side of the page on scroll down but is not working. Adding floats to spans works somehow but is not "responsive". I think it must be a better solution.
Does anybody make it work ?
Here is my code (copy & paste from bootstrap site). Where I did wrong ?
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<div class="container">
....
<div class="row">
<div class="span3 bs-docs-sidebar" data-spy="affix" data-offset-top="50">
<ul class="nav nav-list bs-docs-sidenav">
<li><i class="icon-chevron-right"></i> Download</li>
....
<li><i class="icon-chevron-right"></i> What next?</li>
</ul>
</div>
<div class="span9">
....
<section id="download-bootstrap">
Problem solved. Once I affixed the unordered list, everything working fine. Somehow I understood that I have to affix the parent div, not the list itself. My mistake.
another way to fix this is to set the nav span min-height
.span3 {
min-height: 1px;
}
also I needed to set the nav to not affix when in tablet mode:
#media (max-width: 767px) {
.sidenav.affix {
position: static;
There really isn't enough in the docs at the moment explaining how to get this to work.