I have a button on my website but i want it to be only available on mobile.
How can i hide it from my desktop site?
<div class="pull-right">
<button class="button-menu-mobile open-left">
<i class="ion-navicon"></i>
</button>
<span class="clearfix"></span>
</div>
And here is the css
.button-menu-mobile {
background: transparent;
border: none;
color: #ffffff;
font-size: 21px;
line-height: 60px;
padding: 0px 15px;
Thanks :)
I am attaching a working code snippet, here if you go full screen, you won't be able to see the button.
Working Example
#media(min-width: 900px)
{
.button-menu-mobile
{
display:none;
}
}
<div class="pull-right">
<button class="button-menu-mobile open-left">
<i class="ion-navicon"></i>
</button>
<span class="clearfix"></span>
</div>
You need to use media-queries for this purpose. set min-width according to your need.
#media(min-width: 900px)
{
.button-menu-mobile
{
display:none;
}
}
Code:
#media screen and (min-width: 600px) {
.pull-right {
visibility: hidden;
}
}
Related
Using the attribute value in HTML, I can't make button text work in two lines as well as different font sizes
I have already tried whitespace in css but it's more like word wrap and that does not solve my problem. I also tried using ampersand-hash13; and ampersand-hash10; but it doesn't work as well.
#media (min-height: 280px) {
.divNumKeypad {
position: fixed;
bottom: 0;
width: 100%;
}
.numberBtn{
font-size: 30px;
height: 68px;
}
<div class="col-xs-4 ">
<input id="btnEight" type="button" tabindex="-1" value="HI HELLO" class="btn btn-primary btn-block numberBtn" onclick="buttonClick(8)" />
</div>
I expect to have a button with two lines of text. "HI" should be on the first line with bigger font and the bottom text "HELLO" should be smaller than the text on the top.
Try this below
#media (min-height: 280px) {
.line-1, {
display:block;
font-size: 20px
}
.line-2 {
display: block;
font-size: 10px;
}
}
<div class="col-xs-4 ">
<button>
<span class="line-1">HI</span>
<span class="line-2">HELLO</span>
</button>
</div>
Consider using button instead of input:
button {
font-size: 30px;
}
<button>HI<br><small>HELLO</small></button>
Try this.
label{
max-width: 150px;
font-size: 18px;
display: block;
padding:10px 20px;
border:1px solid black;
cursor: pointer;
}
label span{
display: block;
font-size: 14px;
}
label input{
background:none;
border:none;
}
input[value]{
font-size: 0;
display: none;
}
<div class="col-xs-4 ">
<label> <input id="btnEight" type="button" tabindex="-1" value="HI HELLO" class="btn btn-primary btn-block numberBtn" onclick="buttonClick(8)" />HI<span> HELLO</span></label>
</div>
I am trying to resize my button so it is smaller, more mobile friendly, and only shows the symbol when minimized (versus the symbol and text).
The goal is to have the button appear on the same row as the header on the right-hand side. I also only want to show the symbol, while the text will disappear, only reappearing if the screen size is bigger.
I've tried adjusting the width through media queries and the positioning of the button, but haven't had any luck.
Mobile Version
<!-- Table -->
<div class="container-fluid">
<!-- Mini Row -->
<div class="row">
<div class="col-md-12">
<h3 class="d-inline-block">Welcome!</h3>
<button type="button" class="btn btn-add float-right" id="add invoice"><i class="fas fa-plus-circle"></i>Add Invoice</button>
</div>
</div>
<!-- End of Mini Row -->
#add-invoice {
font-family: "FjallaOne-Regular";
font-size: 1em !important;
color: black;
background-color: rgb(0, 200, 0);
margin-top: 4.5em;
margin-right: 1.75em;
}
/* Media Queries */
#media only screen and (max-width: 480px) {
h3 {
margin-left: -.25em
}
#add-invoice {
margin: -1em;
margin-top: 4.5em;
}
}
wrap your Button text on span tag & add a media query
#media (max-width: 400px) {
.btn span{display:none;}
}
<!-- Mini Row -->
<div class="row">
<div class="col-md-12">
<h3 class="d-inline-block">Welcome!</h3>
<button type="button" class="btn btn-add float-right" id="add invoice"><i class="fa fa-plus-circle"></i> <span>Add Invoice</span></button>
</div>
</div>
https://jsfiddle.net/lalji1051/4tm968rz/4/
Add span tag in button
<button type="button" class="btn btn-add float-right" id="add-invoice">
<i class="fas fa-plus-circle"></i><span>Add Invoice</span></button>
and than css
#media only screen and (max-width: 480px) {
#add-invoice span{
display:none;
}
}
Try this one
#add-invoice {
font-family: "FjallaOne-Regular";
font-size: 1em !important;
color: black;
background-color: rgb(0, 200, 0);
margin-top: 4.5em;
margin-right: 1.75em;
}
/* Media Queries */
#media only screen and (max-width: 480px) {
h3 {
margin-left: -.25em
}
#add-invoice {
margin: -1em;
margin-top: 4.5em;
font-size: 0.5em !important;
}
}
<!-- Table -->
<div class="container-fluid">
<!-- Mini Row -->
<div class="row">
<div class="col-md-12">
<h3 class="d-inline-block">Welcome!</h3>
<button type="button" class="btn btn-add float-right" id="add invoice"><i class="fas fa-plus-circle"></i>Add Invoice</button>
</div>
</div>
<!-- End of Mini Row -->
can anyone help me? It seems that the specific font size for small devices (max 320px) is not working. Can anybody help? I also included the HTML & CSS.
My code:
#media all and (max-width: 320px) {
#titleHome {
font-size: 4vw;
}
#titleHome2 {
font-size: 2vw;
}
}
<div class="home-caption">
<div id="titleHome" style="font-size:1.8vw; float:left; margin-left:4.5%; color:#black">Random text<br/> & random text</div>
<div id="titleHome2" style="font-size:1.1vw; float:left; margin-top: 4.8%; color:black">
Random Text
</div>
</div>
This is because the font size defined inline on the HTML will take precedence over the one defined in the stylesheet. Please move all your styles to the stylesheet.
You should move your inline styles out of the HTML and into the CSS.
#titleHome {
font-size: 1.8vw;
float: left;
margin-left: 4.5%;
color: #000;
}
#titleHome2 {
font-size: 1.1vw;
float: left;
margin-top: 4.8%;
color: #000
}
#media all and (max-width: 320px) {
#titleHome {
font-size: 4vw;
}
#titleHome2 {
font-size: 2vw;
}
}
<div class="home-caption">
<div id="titleHome">Random text<br/> & random text</div>
<div id="titleHome2">
Random Text
</div>
</div>
Try to add !important to the end of the font size
#media all and (max-width: 320px){
#titleHome {
font-size: 4vw !important;
}
#titleHome2{
font-size: 2vw !important;
}
<div class="home-caption">
<div id = "titleHome" class="titleHome">Random text<br/> & random text</div>
<div id = "titleHome2" class="titleHome2">Random Text</div>
</div>
Css
.titleHome {
font-size:1.8vw;
margin-left:4.5%;
}
.titleHome2 {
font-size:1.1vw;
margin-top: 4.8%;
}
.titleHome, .titleHome2 {
color:#FFFFFF"
float:left;
#media all and (max-width: 320px){
font-size: 4vw;
}
}
Hope this helps
I made an announcement div and I want it to disappear when I use the mobile version of the webpage because it occupy to much space when resized for the mobile version.
How can I hide a div when the size of the webpage becomes bigger?
for example: mobile web surfing
my code is
body {margin:0;}
.icon-bar {
width: 100%;
background-color: #0088B8;
overflow: auto;
}
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #0073C4;
}
.active {
background-color: #9b0a0a !important;
}
<div class="icon-bar">
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-globe"></i>
<i class="fa fa-trash"></i>
</div>
Maybe he is new to html and css...
Try to use css rules to achieve this, like Robert said media queries.
Put in your html head this line:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And in your css file wirte below your div-rules (lets say your div has the id="test"):
#media only screen and (min-width: 800px) {
#test {
display: none;
}
}
Now the div is hidden when the screen width is larger than e.g. 800px.
I'd like to add one of those buttons that are shown when on mobile device in order to open the collapsed menu in the navbar, but haven't been able so far, here's the less code and html
.navbar-toggle-always{
.navbar-toggle;
#media (min-width: 768px){
display: block!important;
}
.zero-margins;
}
html
<div class="pull-left ">
<button type="button" class="navbar-toggle-always collapsed" data-toggle="collapse" data-target="#left" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
upon further inspection I've noticed that the element is not hidden, it's just transparent, for some reason if I add
#media (min-width: 768px){
display: block!important;
background-color:pink;
}
i see it fine, but withouth the icon-bar bars or the borders. I'll keep working on it
and this is how I would like to show it:
After some tests I managed to obtain the desired results:
here's the less code:
.navbar-inverse {
.navbar-toggle-always {
border-color: #navbar-inverse-toggle-border-color;
&:hover,
&:focus {
background-color: #navbar-inverse-toggle-hover-bg;
}
.icon-bar-always {
background-color: #navbar-inverse-toggle-icon-bar-bg;
}
}
}
.navbar-toggle-always{
.navbar-toggle;
#media (min-width: 768px){
display: block!important;
background-color: transparent;
border:1px solid #333333;
}
.zero-margins;
.icon-bar-always {
.icon-bar;
border:1px solid #fff;
display: block;
border-radius: 1px;
}
.icon-bar-always + .icon-bar-always {
margin-top: 4px;
}
}
make sure you have at least 768px on the bottom right panel to see it:
http://jsfiddle.net/vyzwfovr/
Why not just add d-block class to toggler?
<button class="navbar-toggler d-block" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
I'm not sure if you want to add another one or is it enough to change the existing one. I case, you want to change the existing one, on a default/clean bootstrap install, this show do it:
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none !important;
}
In a normal bootstrap install, there is this line of css found in their generic css file:
.navbar-toggle { display:none; }
In order to get the button to always show, in your custom CSS you just need to add this line of code. If you have your stylesheet applied after theirs, it will overwrite it.
.navbar-toggle { display:block; } // the !important isn't necessary
The colors of the toggle and icon-bar are defined along with navbar-default as well as with navbar-inverse. So if you are trying to display them on a custom div, the colors are also removed along with the navbar-default/inverse color scheme.
Add this to your css:
.navbar-toggle {
background-color: transparent;
}
.icon-bar {
background-color:#333;
}
Add a custom class to your navbar-toggle, like navbar-toggle-visible and then add this rule to your css
#media (min-width: 768px) {
.navbar-toggle-visible {
display: inline;
}