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.
Related
I have the following script in my html file:
<template name="SideNav">
<header>Lammah</header>
<body>
dd
</body>
<div class="nav">
<i class="fa fa-user-circle"></i>
<i class="fa fa-upload"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-search"></i>
</div>
</template>
And below is the .css file:
.nav {
border-radius: 5px 5px 0px 0px;
overflow: hidden;
background-color: #b7b7e5;
position: fixed;
bottom: 0;
width: 100%;
}
.nav a {
float: left;
width: 25%;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
a:hover{
background-color: #A3A3CC;
}
When I run the html file, the nav class doesn't start from the beginning of the screen, there is small white space on the left as it is shown in the picture below:
the result
What is causing the nav class to not start from the beginning of the screen (bottom left)?
When I run the html file, the nav class doesn't start from the beginning of the screen, there is
This is because by default the client/main.css contains the following lines:
body {
padding: 10px;
font-family: sans-serif;
}
You should remove it in order to remove the white space.
Furthermore some additions on your Template:
The head and body should only be in your client/main.html while the body content will be rendered using the templates. This is, because Blaze is focused to develop single page applications.
So your code client/main.html may be like the following:
<header>
<title>Lammah</title>
</header>
<body>
{{> SideNav }}
</body>
<template name="SideNav">
<div class="nav">
<i class="fa fa-user-circle"></i>
<i class="fa fa-upload"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-search"></i>
</div>
</template>
The default margins and padding are still in place. What you will need is to make sure the parent element has margins and padding set to 0. So for example, the very first css element you will want to set based off your above code would be this:
template {
margin: 0;
padding: 0;
}
try this one
margin: 0 !important;
I am making a webshop and have encountered a sort of weird bug.
I am trying to make a cart "badge" to easily view how many items that are in the cart. It's a responsive site and the badge is located on a a tag with two spans of display: block inside. On the desktop side the badges css looks like this:
.count::after{
content: "2";
display: inline-block;
background: #FF0000;
border-radius: 20%;
padding: 0 0.5em;
transform: scale(0.7);
color: #FFF;
float: right;
position: absolute;
top: 5px;
right: 1.5em;
}
.count::after:empty{
display: none;
padding: 0
}
Which works fine and the badge displays in the upper right corner. However on mobile, the a tags wrapper goes full-width and using the above css results in the badge flying off to the side of the screen.
Thus i wrote the following mobile code:
#media max-width: 990px{
...
.count::after{
position: relative;
top: -90%;
right: 0;
}
}
However. The top: -90% doesn't register properly.
If i enter the development tools and switch it off and on, it works perfectly. But if i refresh it goes right back down to the bottom of the icon.
JS-fiddle of the offending part: here
I agree with Shahil, you should set the position:relative to the element with the .count class and set position:absolute and top:-5px (let's say) to the .count::after
Like so:
.d-block{
display: block;
}
.d-inline_block{
display: inline-block;
}
.t-center{
text-align: center;
}
.menu{
width:100%;
text-align: center;
}
.count {
position:relative;
}
.count::after{
content: "2";
display: inline-block;
background: #FF0000;
border-radius: 20%;
padding: 0 0.5em;
transform: scale(0.7);
color: #FFF;
float: right;
position: absolute;
top: -5px;
right: 0;
}
<div class="col-xs-12 col-md-4 my-auto menu t-right">
<a href="/account/login" class="d-inline_block headerLink">
<i class="fa fa-lg fa-user d-block t-center py-8">icon</i>
<span class="d-block t-center">Min konto</span>
</a>
<i class="fa fa-lg fa-question d-block t-center py-8">icon</i><span class="d-block t-center">Kundeservice</span>
<i class="fa fa-lg fa-shopping-cart d-block t-center py-8">icon</i><span class="kurv d-block t-center">Min kurv</span>
</div>
This should work on both Desktop and mobile without using #media queries
I have the following footer below using bootstrap:
.align-center {
text-align: center;
}
#footer {
background-color: #3c3d41;
color: white;
padding-top: 25px;
padding-bottom: 10px;
}
.footer-social-media-text {
text-decoration: none;
height: 25px;
color: white;
white-space: nowrap;
}
.footer-social-media-icon {
padding-right: 8px;
margin-left: 30px;
margin-right: 2px;
font-weight: bold;
height: 25px;
color: white;
}
#footer a {
-o-transition: .25s;
-ms-transition: .25s;
-moz-transition: .25s;
-webkit-transition: .25s;
transition: .25s;
}
#footer a:hover {
text-decoration: none;
color: greenyellow;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="https://www.mycompany.com/" class="footer-social-media-text">
<i class="fa fa-home fa-2x social footer-social-media-icon"></i> My Company
</a>
</div>
<div class="col-md-9">
<a href="https://www.facebook.com" class="footer-social-media-text pull-right">
<i class="fa fa-facebook fa-2x social footer-social-media-icon"></i> Facebook
</a>
<a href="https://www.instagram.com" class="footer-social-media-text pull-right">
<i class="fa fa-instagram fa-2x social footer-social-media-icon"></i> Instagram
</a>
<a href="https://twitter.com" class="footer-social-media-text pull-right">
<i class="fa fa-twitter fa-2x social footer-social-media-icon"></i> Twitter
</a>
</div>
</div>
<hr />
<p class="align-center">© 2017 My Company</p>
</div>
</footer>
</div>
</div>
https://jsfiddle.net/coyagf2b/
My issue is the code above is that the width threshold using the bootstrap grid does not really match my expectation: <div class="col-md-3"> and <div class="col-md-9">.
Basically I would like to:
Having the right part stacking below the left part when it's the page width is heavily reduced I tried different col-md-x / col-lg-x / col-sm-x without much result...
Change the content align of the two parts to center when the right part is stacking below
How can I do that?
Bootstrap's col-xs- classes do work perfectly find with your code. If you want the right column to fall underneath the left then I would just add col-xs-12 on each of the col-md- divs you have. And you center only on mobile you can use some media queries to achieve that. Something like looks like:
#media (max-width: 991px){
.centerSection{
text-align:center;
}
}
#media (min-width: 992px){
.rightSection {
float:right;
}
}
And here is a link to a working codepen:
https://codepen.io/egerrard/pen/rGrPmM
Check this example, using .text-center, .float-md-left and .float-md-right.
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;
}
}
Im wanting it to look like:
[BUTTON]
or
[Button 1] [Button2]
But im not sure how do so.
My code:
HTML:
<p> ← Get Started</p>
<h3>or</h3>
<p> <i class="fa fa-code-fork"></i> Log In / Sign Up</p>
<p> <i class="fa fa-user-plus" ></i> Sign Up</p>
CSS:
#bottom-btn1{
margin-top: 10px;
margin: 20px;
margin-left: 340px;
display: inline-block;
float: left;
}
#bottom-btn2{
margin-top: 10px;
margin: 20px;
margin-right: 40px;
display: inline-block;
float: right;
}
JSFiddle link: https://jsfiddle.net/d2L7ynu3/
Thank you to the people that help me. It means alot :D
So this is a good opportunity to learn in CSS positioning; something I've fought with for years in order to learn. There's two main methods of achieving this effect but they have some gotchas. Using the following HTML (I've taken out the p tags).
Get Started
<span>or</span>
Log In
Sign Up
The inline-block method will work here, but we'll need to make a small change in order to get the links to line up next to each other. inline-block preserves white space, so you'll see a gap between the elements. Adding HTML comments between the elements will remove the white space (or you can just put the elements side-by-side without the line break for readability).
Get Started
<span>or</span>
Log In<!--
-->Sign Up
Now we can add CSS.
a{
display:inline-block;
}
#get_started{
width:100%;
}
#log_in, #sign_up{
width:50%;
}
If you didn't put the HTML comments in, you'll notice the sign_up link drop below the log_in because of the hidden white space.
If you go with the float method instead, then you'll need some extra markup.
Get Started
<span>or</span>
<p class="cf">
Log In
Sign Up
</p>
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
a{
display:block;
}
#get_started{
width:100%;
}
#log_in, #sign_up{
float:left;
width:50%;
}
The cf class stands for clearfix, which is a hack developed to help create height for parent elements with floated children.
The p element is making the buttons to be draw in different lines. You can try
p {
display: inline-block;
}
I suggest to place a selector class in those p so you will not need to overwrite the css for all th p elements
don't forget text-align : center; it saves most of the times.
i just tided up your code.. that might help you improve your coding.. just change the .wrap size if you do any changes on buttons. hope it helps
p, .back, h3 {
text-align: center;
}
.wrap {
margin: 0 auto;
width: 172px;
}
.btn {
float: left;
margin-left: 5px;
}
<p> ← Get Started
</p>
<h3>or</h3>
<p class="wrap">
<i class="fa fa-code-fork"></i> Log In / Sign Up
<i class="fa fa-user-plus" ></i> Sign Up
</p>
Try this
<div class="buttonbox">
<p> ← Get Started</p>
<h3>or</h3>
<p> <i class="fa fa-code-fork"></i> Log In / Sign Up</p>
<p> <i class="fa fa-user-plus" ></i> Sign Up</p>
</div>
CSS
.buttonbox {
text-align: center;
}
.buttonbox > p {
display: inline-block;
float: none!important;
}
don't call float: left; for those buttons.
HTML:
<div class="wrap">
← Get Started
<h3>or</h3>
<div>
<i class="fa fa-code-fork"></i> Log In / Sign Up
<i class="fa fa-user-plus" ></i> Sign Up
</div>
</div>
CSS:
.wrap {
max-width: 1000px; /* any size you want */
width: 96%; /* 960px */
margin: 0 auto;
text-align: center;
overflow: hidden;
padding: 1%;
}
.wrap h3 {
margin: 10px 0;
}
.wrap a {
padding: 20px 0;
}
.wrap > a {
border: 1px solid #ddd;
display: block;
width: 60%;
margin: 0 auto;
}
.wrap div a {
width: 48%;
float: left;
outline: 1px solid #ddd;
margin: 0 1%;
}
Result looks like this:
[BUTTON]
or
[Button 1] [Button2]
#bottom-btn1, #bottom-btn2{
padding: 10px;
border: solid black 3px;
background-color: #83D8B7;
color: #134A1E;
}
a{
text-decoration: none
}
<br>
<i class="fa fa-code-fork"></i> Log In / Sign Up
<i class="fa fa-user-plus" ></i> Sign Up