I have a scroll menu and i want on mobiles to be hidden and to be visible only on desktops but i don't know how to do that, some help appreciated. Thanks! Here is my menu codes:
Css menu scroll code:
#iconuri_oferte_useri {
float: right;
position: absolute;
}
.iconuri_dreapta_oferte_useri {
vertical-align: middle;
padding: 2px;
margin-top: 85px;
right: 2px;
z-index: 2;
width: 80px;
background-color: #fff;
border-radius: 20px 0 0 20px;
border-bottom: 1px solid #069;
border-top: 1px solid #069;
border-left: 1px solid #069;
}
.iconuri_dreapta_oferte_useri .originale_icon, .iconuri_dreapta_oferte_useri .transport_icon, .iconuri_dreapta_oferte_useri .livrare_icon, .iconuri_dreapta_oferte_useri .transport_retur, .iconuri_dreapta_oferte_useri .plata_rate, .iconuri_dreapta_oferte_useri .plata_card, .iconuri_dreapta_oferte_useri.icon_garantie {
border-bottom: 1px solid #069;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
margin-bottom: 5px;
}
.iconuri_dreapta_oferte_useri i {
font-size: 40px;
text-align: center;
width: 100%;
color: #069;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconuri_dreapta_oferte_useri .title {
font-size: 13px;
text-align: center;
width: 100%;
font-weight: 700;
color: #069;
}
.iconuri_dreapta_oferte_useri .descriere {
font-size: 10px;
text-align: center;
width: 100%;
color: #f60;
line-height: 9px;
padding-bottom: 2px;
}
Html menu scroll code:
<div class="iconuri_dreapta_oferte_useri" id="iconuri_oferte_useri" style="top: 82px;">
<div class="originale_icon"><i class="fa fa-check"></i> <div class="title">PRODUSE ORIGINALE</div> <div class="descriere">Produse originale, verificate</div></div>
<div class="transport_icon"><i class="fa fa-truck"></i> <div class="title">TRANSPORT</div> <div class="descriere">Gratuit pentru comenzi peste 150 Lei</div></div>
<div class="livrare_icon"><i class="fa fa-clock-o"></i> <div class="title">LIVRARE</div> <div class="descriere">In 24 ore, acoperire nationala</div></div>
<div class="transport_retur"><i class="fa fa-rotate-right"></i> <div class="title">RETUR</div> <div class="descriere">In 14 zile de la data livrarii </div></div>
<div class="plata_card"><i class="fa fa-money"></i> <div class="title">PLATI</div> <div class="descriere">Ramburs si card de credit </div></div>
<div class="icon_garantie"><i class="fa fa-empire"></i> <div class="title">GARANTIE</div> <div class="descriere">30 de zile pentru orice produs </div></div>
</div>
You're probably looking for media queries.
#media (max-width:600px){
.iconuri_dreapta_oferte_useri{
display:none;
}
}
Related
I'm trying to draw the black border around Test1 - Test4 to also span around Test5. At the moment, Test5 falls outside. Does anyone know how to draw it to include Test5?
.description {
border: 1px solid;
}
.descriptionTop {
display: inline-block;
}
.ao {
padding: 5px;
font-weight: 700;
text-transform: uppercase;
}
.pr {
text-align: right;
float: right;
}
.pm {
border: solid 1px #53a318;
border-radius: 3px;
color: #53a318;
box-sizing: border-box;
font-size: 12px;
float: right;
padding: 2px 8px;
}
<div class="description">
<div class="descriptionTop">
<span class="descriptionLeft">Test1</span>
<span class="ao">Test2</span>
</div>
<div class="pr">
<div>
<span>Test3</span>
<span>Test4</span>
</div>
<div class="pm">Test5</div>
</div>
</div>
Add overflow: auto; to the container to include floated elements:
.description {
border: 1px solid;
overflow: auto;
}
.descriptionTop {
display: inline-block;
}
.altOffer {
padding: 5px;
font-weight: 700;
text-transform: uppercase;
}
.prices {
text-align: right;
float: right;
}
.promotion {
border: solid 1px #53a318;
border-radius: 3px;
color: #53a318;
box-sizing: border-box;
font-size: 12px;
float: right;
padding: 2px 8px;
}
<div class="description">
<div class="descriptionTop">
<span class="descriptionLeft">Test1</span>
<span class="altOffer">Test2</span>
</div>
<div class="prices">
<div>
<span>Test3</span>
<span>Test4</span>
</div>
<div class="promotion">Test5</div>
</div>
</div>
This is because .prices has float. Explanation of the problem
add the following to your css (the css of famous clearfix class) -
.description:after {
content: "";
display: table;
clear: both;
}
.description {
border: 1px solid;
}
.description:after {
content: "";
display: table;
clear: both;
}
.descriptionTop {
display: inline-block;
}
.ao {
padding: 5px;
font-weight: 700;
text-transform: uppercase;
}
.pr {
text-align: right;
float: right;
}
.pm {
border: solid 1px #53a318;
border-radius: 3px;
color: #53a318;
box-sizing: border-box;
font-size: 12px;
float: right;
padding: 2px 8px;
}
<div class="description">
<div class="descriptionTop">
<span class="descriptionLeft">Test1</span>
<span class="ao">Test2</span>
</div>
<div class="pr">
<div>
<span>Test3</span>
<span>Test4</span>
</div>
<div class="pm">Test5</div>
</div>
</div>
Chrome output
Firefox output
.continue-btn {
border: 2px solid #000;
border-radius: 0px!important;
width: 100%;
text-align: center;
padding: 0px;
line-height: 55px;
color: #000;
margin: 6% 0%;
}
.heading-one {
font-size: 14pt;
font-family: Nexabold;
}
<div class="" id="continue-page2" >
<a class="btn continue-btn heading-two" href="#"> CONTINUE <span class="fa fa-arrow-right "></span></a>
</div>
In Firefox, the span is displayed in next line in the button. If I make a change in CSS its affected in Chrome.
See the code below. Hope this will work for you.
#continue-page2 {
border: 2px solid #000;
display: inline-block;
overflow: hidden;
}
#continue-page2 .btn {
float: left;
line-height: 40px;
padding-left: 25px;
text-decoration: none;
color: #000000;
}
#continue-page2 span {
border-left: 2px solid #000;
float: right;
background-color: #831A24;
width: 40px;
height: 40px;
display: block;
text-align: center;
line-height: 40px;
color: #ffffff;
margin-left: 25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="continue-page2" >
<a class="btn continue-btn heading-two" href="#">CONTINUE
<span class="fa fa-arrow-right"></span></a>
</div>
In Firefox Quantum 59.0.2 (64-bit)
Following code works fine.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.continue-btn {
border: 2px solid #000;
border-radius: 0px!important;
width: 100%;
text-align: center;
padding: 0px;
line-height: 55px;
color: #000;
margin: 6% 0%;
}
.heading-two {
font-size: 14pt;
font-family: Nexabold;
}
</style>
</head>
<body>
<div class="" id="continue-page2" >
<a class="btn continue-btn heading-two" href="#"> CONTINUE
<span class="fa fa-arrow-right"></span></a>
</div>
</body>
</html>
I'm almost done, but my problem is the background of the text , I even try the opacity but the underline of the box appear.
.block {
display: inline-block;
border: 2px solid white;
padding: 5px;
margin-top: 1em;
}
.paddingbox{
padding: 60px;}
.boxed {
float: left;
color: white;
padding: 0 5px;
margin-top: -2em;
}
<div class="paddingbox"><center>
<div class="block">
<span class="boxed">
<h1 style="color:white;"><?php echo get_the_title(); ?></h1></span>
</div></center></div>
With backgroun color
without background color
I'm trying to achive is like this, but it have a back ground like in the picture above
I tried fieldset and this happen
The behavior can be achieved with a fieldset tag.
.block{
display: inline-block;
border: 2px solid white;
}
.title{
color: white;
font-size: 1.5em;
text-align: center;
}
body{
background: purple;
}
<fieldset class="block">
<legend class="title">
Services
</legend>
</fieldset>
I get help of positions for solve this question!
div {
position: relative;
width: 400px;
padding: 10px;
border: 1px solid;
}
span {
position: absolute;
top: -10px;
left: 40%;
background-color: #FFF;
font-weight: bold;
}
<div>
<span>About Us</span>
</div>
I have a navbar with a few elements inside it and a button that escapes the navbar when i resize it. What CSS property should I style to keep the button in CSS to stop the button from escaping the navbar?
Attached is a JFiddle of an example of what happens:
https://jsfiddle.net/6Lx0hkfa/
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
float: left;
margin-left: 235px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
<a href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
</div>
</section>
I don't know what you are trying to achieve, but this one worked for me:
.green-button {
position: absolute;
}
This is a case where I would use float for simplicity. Note that this requires to put the link element on top of the rest of the wrapper's contents within the markup, but it's the most direct solution.
.green-button-link {
float: left;
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
margin-right: 20px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<a class="green-button-link" href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
</div>
</section>
check the snippet if its what you want.i added description add to ones I added to your code.
* {
margin: 0;
padding: 0;
}
body {
background: url(img/hero_bg.jpg) repeat-y center center fixed;
background size: 100%;
}
#header {
background-color: #1d7cb6;
display: block;
/* position: relative; */
color: white;
width: 100%;
height: 50px;
}
.wrapper {
text-align: center;
margin: 0px auto;
font-family: 'Raleway';
background: white;
z-index: 500;
vertical-align: middle;/* add */
position: relative;/* add */
padding-right: 200px;
}
.address {
display: inline-block;
width: 240px;
float: left;
display: inline-block;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.phone {
display: inline-block;
width: 100px;
float: left;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.email {
width: 150px;
float: left;
display: inline-block;
height: 100%;
padding: 20px 18px;
font-size: 10px;
}
a.social-btn {
width: 20px;
height: 20px;
margin-top: 13px;
float: left;
}
a.social-btn.fb {
background: url("img/facebook#2x.png") 0% 0%/ 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.tw {
background: url("img/twitter#2x.png") 0% 0% / 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.ig {
background: url("img/instagram#2x.png") 0% 0% / 20px 20px no-repeat;
}
a.social-btn.gp {
background: url("img/google#2x.png") 0% 0% / 20px 20px no-repeat;
}
section {
width: 900px;
margin: 0 auto;
}
section#header .wrapper button.green-button {
text-decoration: none;
font-family: 'Raleway';
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
/* float: left; */
right: 0;/* add */
position: absolute;/* add */
/* margin-left: 235px; */
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social"><a class="social-btn fb" href="http://facebook.com"></a></div>
<div class="social"><a class="social-btn tw" href="http://twitter.com"></a></div>
<div class="social"><a class="social-btn ig" href="http://instagram.com"></a></div>
<div class="social"><a class="social-btn gp" href="https://plus.google.com"></a></div>
<button class="green-button">Book Consultation</button>
</div>
</section>
Please take a look at this
http://jsfiddle.net/T7cVg/7/
What I'm trying to do is to get css3 circles with centered icons (both: horizontally and vert.). What am I doing wrong?
http://screencast.com/t/bpxIefbf
As you see, envelope stays in left side, phone too. In other words, position of icons is not in center.
CSS
.circle {
color: #fbfbfb;
width: 20px;
height: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #b0b8c2;
font-size: 11px;
font-weight: 200;
color: #d9dfe6;
text-align: center;
cursor: pointer;
line-height: 19px;
margin: 0 10px 0 0;
float:left;
}
HTML
<div class="circle">
<i class="icon-facebook"></i>
</div>
<div class="circle">
<i class="icon-twitter"></i>
</div>
<div class="circle">
<i class="icon-phone"></i>
</div>
<div class="circle">
<i class="icon-envelope"></i>
</div>
[class^="icon-"], [class*=" icon-"] {line-height: 20px}
This will work.
http://jsfiddle.net/T7cVg/8/ How about this? I have updated the jsfiddle. Will this work for you?
.circle {
color: #fbfbfb;
width: auto;
height: auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #b0b8c2;
font-size: 11px;
font-weight: 200;
color: #d9dfe6;
text-align: center;
cursor: pointer;
line-height: normal;
margin: 0 10px 0 0;
float:left;
padding:1em 2%;
}
.circle [class^="icon-"],
.circle [class*=" icon-"] {
line-height: normal
}