On this site Site link I have a contact info on the top right with tel: link for mobile devices. How can we hide the tel: link on desktops the best (easiest) way?
Now I have this:
CSS:
#header .contact-info1 { width: 253px; height: 50px; display: block; float: right; background: url(contact-info1.png) 0 0 no-repeat transparent; margin-right: 39px; margin- top: 110px; }
#header .contact-info2 { width: 292px; height: 51px; display: block; float: right; background: url(contact-info2.png) 0 0 no-repeat transparent; margin-right: 0px; margin- top: 30px; }
#media only screen and (max-device-width: 480px) {
#header .contact-info1-mobile { width: 253px; height: 50px; display: block; float: right; cursor: pointer; background: url(contact-info1.png) 0 0 no-repeat transparent; margin-right: 39px; margin-top: 110px; }
#header .contact-info2-mobile { width: 292px; height: 51px; display: block; float: right; cursor: pointer; background: url(contact-info2.png) 0 0 no-repeat transparent; margin-right: 0px; margin-top: 30px; }
HTML:
<a href="tel:+491796737741" class="contact-info1-mobile" ></a>
<div style="clear:right"></div>
<a href="mailto:info#rw-fliesen.com" class="contact-info2-mobile" ></a>
At the moment I'm hiding the link for desktops, but how can I hide the link for desktops and at the same time having the contact-images displayed for desktops?
you can also do that by $(window).resize using jquery
$(window).resize(function() {
var width = $(window).width();
if (width < 750) {
// Do Something
}
else {
//Do Something Else
}
});
another option by detecting browser as link mention on my comment using jQuery or javascript
Related
So I am currently building a landing page for an app that will be soon coming online - However, I have only developed the iOS version so far and will start the android development once the iOS version has gone live.
Now, on my landing page - I have 2 buttons that will redirect to either the Apple store or Google play. For the apple store everything is fine, however I want to add a text that appears when going over the Google Play button which will say something like "coming soon!".
I have tried something but since I am not an expert when it comes to web development, the outcome below clearly shows that swell.. Can anyone help?
.home {
color: #3D464C
}
.home p {
color: #757F86
}
.home__header {
position: relative;
margin-bottom: 3em;
padding: 0 15px;
background: url("../images/jpg/home/header.f03ddb38.jpg") 0 80% no-repeat;
background-size: cover;
text-align: center
}
.home__header h1 {
margin-bottom: 100px;
font-size: 1.8em;
line-height: 1.4
}
.home__header .home__cta--web {
position: absolute;
bottom: -4em;
left: 0;
width: 100%
}
#media (min-width: 769px) {
.home__header {
background-size: cover;
background-position: 50% 80%
}
.home__header h1 {
margin-top: 100px;
margin-bottom: 0;
font-size: 2.4em
}
}
.home__app {
max-width: 300px;
margin: 90px auto 30px;
text-align: center
}
#media (min-width: 769px) {
.home__app {
margin: 30px auto 100px
}
}
.home__app li {
display: inline-block;
margin-top: 0;
width: 50%;
margin-right: -.4em;
vertical-align: middle;
padding: 0 7.5px
}
.home__cta--web {
display: block;
margin-top: 2.5em
}
.home .button {
margin-top: 0;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.home__step {
padding: 50px 15px;
border-bottom: 1px solid #ddd
}
.home__step .illu__container {
margin: 0 auto
}
.home__step__desc {
max-width: 600px;
margin: 0 auto;
text-align: center
}
.home__step h2 {
font-size: 2em;
line-height: 1.4
}
.home__step--04 {
position: relative;
background: url("../images/jpg/home/04.9474e531.svg") no-repeat;
background-size: 80%;
background-position: center 0
}
#media (min-width: 769px) {
.home__step--04 {
background-size: 500px
}
}
.home__step--04 .home__step__illu {
padding: 0 40px;
max-width: 600px;
margin: 0 auto 30px
}
#media (min-width: 769px) {
.home__step {
padding: 100px 15px
}
.home__step--01 .home__step__illu,
.home__step--03 .home__step__illu {
display: inline-block;
margin-top: 0;
width: 50%;
margin-right: -.4em;
vertical-align: middle;
padding: 0 20px
}
.home__step--01 .home__step__illu .illu__container,
.home__step--03 .home__step__illu .illu__container {
margin-right: 0
}
.home__step--01 .home__step__desc,
.home__step--03 .home__step__desc {
text-align: left;
display: inline-block;
margin-top: 0;
width: 50%;
margin-right: -.4em;
vertical-align: middle
}
}
<ul class="home__app hide-for-medium js-dl--app">
<li>
<a href="#" data-store="ios" target="_blank">
<picture class="picture picture--no-background" style="padding-bottom: 34.88%"><img src="assets/images/svg/store/appstore--en.4c7135ef.svg" alt="Download the iOS app"></picture>
</a>
</li>
<li>
<a href="#" data-store="android" target="_blank">
<picture class="picture picture--no-background" style="padding-bottom: 34.88%"><img src="assets/images/svg/store/playstore--en.618c3ad6.svg" alt="Download the Android app"></picture>
</a>
</li>
</ul>
Current Outcome
Current outcome
If I understood your question. You want a the coming soon text to come up whenever anyone hover the playstore button. Please use the code below as reference.
Note : The .container div here is just for example. You should put the code inside .container in your li and make required changes with img src and other styles
.container{
width: 50%;
padding: 50px;
background: #444;
text-align: center;
}
.my-btn-class{
position: relative;
display: block;
}
.my-btn-class img{
max-width: 100%;
}
.my-btn-class:hover > .btn-over{
display: flex;
}
.btn-over{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: none;
top: 0px;
align-items: center;
justify-content: center;
color:#ddd;
font-weight: 600;
}
<div class="container"><!--Example div. Use the below code in your li -->
<a class="my-btn-class" href="#" data-store="android" target="_blank">
<picture class="picture picture--no-background" style="padding-bottom: 34.88%"><img src="http://via.placeholder.com/350x150" alt="Download the Android app"></picture>
<div class="btn-over">
Coming Soon
</div>
</a>
</div>
Hope this helps
I'm trying to build a left-panel for the navigation of a website; and running into a little bit of a problem. I originally was using CSS to create the buttons on the panel (Welcome, Services, Portfolio, FAQ and Contact) but below it I also wanted some Affiliation links, those were images with the logo's of the affiliations.
Here is an image for you.
http://prntscr.com/atci5k
When I was using CSS to create the buttons, I was able to use a:hover to change the background color, but I couldn't get the text centered vertically within the background, and I couldn't get it to stop clipping on re-size.
So I tried creating images to replace it, but now I'd like the a:hover to replace the welcome.png w/ welcome2.png so it will make the background darker on hover.
Here's the code:
<div class="leftpanelPics">
<a id="change" href="#" > <img src="images/nav/welcome.png"> </a>
<a id="change" href="services.html"><img src="images/nav/services.png"></a>
<a id="change" href="portfolio.html"><img src="images/nav/portfolio.png"></a>
<a id="change" href="faq.html"><img src="images/nav/faq.png"></a>
<a id="change" href="contact.html"><img src="images/nav/contact.png"></a>
</div>
<p class="text text-1"><span>Affiliations:</span></p>
<div class="leftpanelPics">
<img src="images/logos/FMO_Logo.png">
<img src="images/logos/IOCP_Logo.png">
<img src="images/logos/St_Jude_Logo.png">
</div>
<p class="text text-1"><span>Social Media:</span></p>
<div class="socialmedia">
<img src="images/socialmedia/twitterlogo.png">
<img src="images/socialmedia/facebooklogo.png">
<img src="images/socialmedia/instagramlogo.png">
<img src="images/socialmedia/pinterestlogo.png">
<img src="images/socialmedia/linkedinlogo.png">
</div>
`
Any help would be greatly appreciated.
Thanks
Edit
CSS:
.leftpanel {
position: relative;
float: left;
clear: both;
z-index: 10;
width: 20.4%;
height: 1199px;
margin-left: 10%;
vertical-align: middle;
}
.leftpanel .text {
min-height: 14px;
margin-left: 6.5%;
}
.body a.leftpanelPics:hover {
color: darkcyan;
width: 150%;
}
.leftpanelPics {
float: left;
clear: both;
width: 68%;
height: auto;
margin: 7px 0 0 13%;
}
.leftpanelPics img{
width: 100%;
float: left;
margin-top: 5px;
margin-bottom: 5px;
border: 1px #0d1e6e solid;
box-shadow: 0px -1px 20px rgba(0,0,0,.9);
}
.leftpanel {
position: relative;
float: left;
clear: both;
z-index: 10;
width: 20.4%;
height: 1199px;
margin-left: 10%;
vertical-align: middle;
}
.leftpanel .text {
min-height: 14px;
margin-left: 6.5%;
}
.body a.leftpanelPics:hover {
color: darkcyan;
width: 150%;
}
.leftpanelPics {
float: left;
clear: both;
width: 68%;
height: auto;
margin: 7px 0 0 13%;
}
.leftpanelPics img{
width: 100%;
float: left;
margin-top: 5px;
margin-bottom: 5px;
border: 1px #0d1e6e solid;
box-shadow: 0px -1px 20px rgba(0,0,0,.9);
}
You may want to create a class for the link itself. For example
<a class="welcome" href="#" ></a>
CSS:
.welcome {
margin-bottom: 10px;
width: 160px;
height:160px;
display:block;
background:transparent url('images/nav/welcome.png') center top no-repeat;
}
.welcome:hover {
background-image: url('images/nav/welcome2.png');
}
To create the rollover of the img on a:hover, you can do like this :
a:hover img {
content:url("http://lorempicsum.com/futurama/255/200/2");
}
See working fiddle
But it's not fully compatible on every browsers (last edit a year ago). See this answer on SO :
https://stackoverflow.com/a/11484688/6028607
An other way to do it, a more compatible one, is to use pseudo element on the link hover like this
a { position: relative; display: inline-block; }
a:hover:before {
content:"";
position: absolute;
left: 0; right: 0; bottom: 0; top: 0;
background:url("http://lorempicsum.com/futurama/255/200/2") no-repeat #fff;
}
See a working fiddle of this solution
here is the link to the site ( http://pavilioncreative.com/ ) hit refresh if you don't see a fullscreen gif as the background.
Im trying to get the red box to be alway centre no matter what size the screen is at. The problem is that the side menu has a position of fixed so the main content div is stretching fully 100% across the screen, under the side menu.
I think I might be going about it all wrong ?
<html lang="en">
<head>
<title>FirstPage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css" >
<link rel="stylesheet" href="css/text.css" >
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div class="wraper">
<ul>
<li class="menu" >
<div class="menu_tab_wrap">
<div class="menu_tab">
<div class="menu_off_wrap">
<div class="menu_off">
<div class="barOne"></div>
<div class="spacer"></div>
<div class="barTwo"></div>
<div class="spacer"></div>
<div class="barThree"></div>
</div>
</div>
</div>
</div>
<div class="menu_tab_wrap_on">
<div class="menu_tab_on">
<div class="menu_on_wrap">
<div class="menu_on">
<div class="cross"></div>
</div>
</div>
</div>
</div>
<div class="logo_wrap">
<div class="logo">
<img src="img/logo.svg">
</div>
</div>
</li>
<section id="menu_out">
<div class="menu_inner_wrap">
<div class="menu_list">
<ul class="menu_ul">
<li class="menu_li"> Home </li>
<span class="in_lable">Back to the home page</span>
<li class="menu_li"> About </li>
<span class="in_lable">Find out more about me</span>
<li class="menu_li"> Portfolio </li>
<span class="in_lable">Take a look at my past work</span>
<li class="menu_li"> Contact Me </li>
<span class="in_lable">Get in contact with me</span>
</ul>
</div>
</div>
</section>
<li class="content">
<div class="content_wrap">
<h1>test</h1>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var hoverIn = false; //You need this counter to detect whether animate occurs.
$(".menu_tab").hover(function() {
if (hoverIn)return; //if the hover is activated, it stops the function
//I also took the liberty to help you add stop to prevent multiple hover. Feel free to implement that else where
$(".barOne").stop(true, true).animate({
"bottom": "+=5px"
}, "fast");
$(".barThree").stop(true, true).animate({
"top": "+=5px"
}, "fast");
hoverIn = true;
}, function() {
if (!hoverIn)return; //if the hover is deactivated, it stops this function
$(".barOne").stop(true, true).animate({
"bottom": "-=5px"
}, 300);
$(".barThree").stop(true, true).animate({
"top": "-=5px"
}, 300);
hoverIn = false;
});
});
$(document).ready(function () {
if($(window).width() > 700) {
$(".menu_tab").click(function(){
$("#menu_out").animate({"width": "30em"}, "slow");
$(".menu_tab_wrap_on").stop().fadeIn();
$(".menu_list").stop().delay( 400 ).fadeIn('slow');
});
}else{
$(".menu_tab").click(function(){
$("#menu_out").animate({"width": "100%"}, "slow");
$(".menu_tab_wrap_on").stop().fadeIn();
$(".menu_list").stop().delay( 400 ).fadeIn('slow');
});
}
});
$(document).ready(function () {
$(".menu_tab_wrap_on").click(function(){
$(".menu_tab_wrap_on").stop().hide('fast');
$("#menu_out").animate({"width": "0em"}, "slow");
$(".menu_list").stop().hide();
});
});
</script>
</body>
</html>
html{
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}
.wraper{
width: 100%;
margin: auto;
padding: 0;
}
.wraper ul{
width: 100%;
margin: 0 auto;
padding: 0;
}
.wraper ul li{
padding: 0;
margin: 0 auto;
display: inline-block;
}
.wraper ul .menu{
width: 7%;
min-width: 7em;
max-width: 7em;
background: black;
height: 100%;
position: fixed;
z-index: 20;
float: left;
}
.wraper ul .content{
background-color: blue;
width: 93%;
height: 70em;
float: right;
}
.wraper ul .content .content_wrap{
width: 80%;
margin: auto;
text-align: center;
border: red solid 1px;
}
.menu .menu_tab_wrap{
position: relative;
}
.menu .menu_tab{
width: 100%;
background-color: #232323;
height: 6em;
display: table;
position: absolute;
width: 100%;
cursor: pointer;
}
.menu .menu_tab .menu_off_wrap {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.menu .menu_tab .menu_off_wrap .menu_off{
margin-left: auto;
margin-right: auto;
position: relative;
}
.menu .menu_tab .menu_off_wrap .menu_off .barOne,.barTwo,.barThree{
width: 3em;
padding: 2px;
background-color: white;
margin: auto;
position: relative;
}
.menu .menu_tab .menu_off_wrap .menu_off .spacer{
width: 5em;
height: 5px;
}
.menu .menu_tab_wrap_on{
position: relative;
display: none;
}
.menu .menu_tab_wrap_on .menu_tab_on{
width: 100%;
background-color: white;
height: 6em;
display: table;
position: absolute;
width: 100%;
cursor: pointer;
}
.menu .menu_tab_wrap_on .menu_tab_on .menu_on_wrap {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.menu .menu_tab_on .menu_on_wrap .menu_on{
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
}
.menu .menu_tab_on .menu_on_wrap .menu_on .cross{
width: 3em;
height: 3em;
color: #232323;
margin: auto;
position: relative;
}
.cross:before, .cross:after {
position: absolute;
content: ' ';
height: 3em;
width: 4px;
background-color: #333;
}
.cross:before {
transform: rotate(45deg);
}
.cross:after {
transform: rotate(-45deg);
}
.menu .logo_wrap{
width: 100%;
text-align: center;
}
.menu .logo_wrap .logo{
width: 7em;
margin: auto;
position:absolute;
bottom:0;
padding-bottom: 2em;
}
.menu .logo_wrap .logo img{
width: 70%;
height: auto;
}
#menu_out{
background-color: #232323;
height: 100%;
width: 0em;
position: fixed;
z-index: -1;
overflow-y:scroll;
overflow-x:hidden;
border-right: 0.5em black solid;
z-index: 10;
}
#menu_out .menu_inner_wrap{
position: relative;
}
#menu_out .menu_list{
width: 70%;
height: auto;
margin: auto;
padding-top: 5em;
padding-bottom: 0em;
display: none;
position: relative;
}
#menu_out .menu_list .menu_ul{
padding: 0;
margin: 0 auto;
width: 100%;
padding-left: 4em;
padding-bottom: 2em;
}
#menu_out .menu_list .menu_ul .menu_li{
display: block;
padding: 0;
margin: 0 auto;
}
#menu_out .menu_list .menu_ul .menu_li a{
font-size: 40px;
color: white;
text-decoration: none;
font-family: 'Lora', serif;
font-weight: 700;
opacity: 0.8;
}
#menu_out .menu_list .menu_ul .menu_li a:hover{
opacity: 1;
}
#menu_out .menu_list .menu_ul .in_lable{
font-size: 15px;
color: #80E577;
font-weight: 100;
font-family: 'Open Sans', sans-serif;
position: relative;
bottom: 10px;;
}
#menu_out .menu_inner_wrap .footer{
width: 100%;
margin: auto;
position:absolute;
bottom:0;
height: 10em;
}
#media only screen and (max-width: 800px) {
.wraper ul .content{
background-color: blue;
width: 90%;
height: 70em;
float: right;
}
}
#media only screen and (max-width: 700px) {
.wraper ul .content{
background-color: blue;
width: 100%;
height: 70em;
float: none;
}
.wraper ul .menu{
width: 100%;
min-width: none;
max-width: none;
height: 5em;
}
.menu .menu_tab{
height: 100%;
display: table;
position: absolute;
width: 6em;
cursor: pointer;
right: 0;
}
.menu .logo_wrap{
width: 100%;
text-align: center;
}
.menu .logo_wrap .logo{
width: 7em;
margin: auto;
position:absolute;
bottom:0;
padding-top: 1em;
padding-bottom: 1em;
}
.menu .menu_tab_wrap_on .menu_tab_on{
width: 6em;
height: 100%;
right: 0;
}
#menu_out .menu_list{
width: 100%;
height: auto;
margin: auto;
padding-top: 8em;
text-align: center;
}
#menu_out .menu_list .menu_ul{
padding: 0;
margin: 0 auto;
width: 100%;
padding-left: 0em;
text-align: center;
}
#menu_out .menu_list .menu_ul .menu_li a{
font-size: 35px;
color: white;
text-decoration: none;
font-family: 'Lora', serif;
font-weight: 700;
}
#menu_out .menu_list .menu_ul .menu_li a .in_lable{
font-size: 10px;
color: #80E577;
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
#menu_out{
width: 0;
border-right: none;
}
}
Looking at your CSS, I see this:
#content_wrap .content {
max-width: 1050px;
width: 80%;
margin: auto;
height: 700em;
border: red solid 1px;
margin-right: 7%;
margin-left: 13%;
}
If you remove margin left and margin right, does it accomplish what you're after?
Example:
#content_wrap .content {
max-width: 1050px;
width: 80%;
margin: auto;
height: 700em;
border: red solid 1px;
}
(When you remove margin-left and margin-right, margin: auto will then apply auto to margin top, right, bottom, and left.)
UPDATE 2/25/2016:
After following the steps above, you're most of the way there. However, if you want the content to change it's position (or re-center itself) as the menu expands out from the left side, it'll require a little more CSS and some JavaScript to add and remove a class. Note: The above CSS changes are necessary for this to work.
#content_wrap{
//This should be the exact same with as the menu when it's not expanded out
padding-left: 7em;
//Set this to the same amount of time it takes for the menu to expand
//This will animate the effect using CSS
transition: 0.5s;
}
#content_wrap.menu_showing {
//This should be the exact same with as the menu when it's expanded out
padding-left: 30em
}
Now just toggle that class on and off with JavaScript as you click the "Expand Menu" icon. Here's an example using jQuery:
$(".menu_tab").click(function(){
$("#content_wrap").toggleClass("menu_showing");
});
So, I've been building sites for a good while, mainly utilizing Zurb Foundations for layout and responsive features. Recently, for the first time, I decided to hack it out from the ground up using media queries. My CSS is a little wonky (I, for some reason, had to push my second section down by 260px to avoid overlapping the first) but does the job just fine in Chrome. In Firefox and Safari however the two sections remain atop one another. Can anyone recommend a CSSolution for my issue?
Thanks,
John
/*home.css*/
p {
font-family: 'Droid Sans';
font-size: .8em;
}
h1, h2, h1 > a {
font-size: 1.2em;
font-weight: normal;
}
.landscape {
background-image: url("../img/landscape1.jpg");
background-size: cover;
border-radius: 25px;
height: 327px;
margin: 0 auto;
}
/*Styling for the Request A Quote form*/
.quote {
background-color: green;
font-size: .7em;
color: white;
z-index: -1;
}
.quote > h2 {
color: #fff;
font-size: 1.2me
}
input {
display: block;
width:180px;
color:black;
border-radius: 6px;
border: 1px solid #fff;
padding: 7px;
}
#submit {
width: 80px;
}
/*Landscape image settings for large screens*/
#media screen and (min-width: 900px) {
.landscape {
width: 890px;
height: 327px;
max-width: 1000px;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
/*Form styles for large screen*/
#media screen and (min-width: 700px) {
.quote {
float: right;
width: 220px;
height: 327px;
border-radius: 0 25px 25px 0;
padding: 0 15px;
}
.offer {
display: none;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
/*Landscape styles for 700 > 900px screens*/
#media screen and (max-width: 900px) {
.landscape {
height: 327px;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
#media screen and (max-width: 700px) {
.landscape {
width: 100%;
height: 200px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.quote {
position: relative;
top: 200px;
border-radius: 0 0 25px 25px;
padding: 10px 0 10px 0;
height: 240px;
float: none;
width: 60%;
}
form, .quote > h2 {
padding: 0 10px;
}
input {
width: 250px;
}
.offer {
display: block;
float: right;
background-color: #A8CD1B;
position: relative;
top: -60px;
z-index: 1;
width: 40%;
min-width: 120px;
height: 240px;
padding: 10px 20px;
border-radius: 0 0 25px 0;
}
.offer > p {
color: black;
font-size: .8em;
}
.your-yard-left {
width: 100%;
display: block;
position: relative;
top: -50px;
border-radius: 25px 0 0 25px;
width: 70%;
}
.your-yard-right {
width: 100%;
display: block;
position: relative;
top: -50px;
height: 260px;
}
}
#media screen and (max-width: 650px) {
.offer {
width: 30%;
}
.quote {
width: 70%;
}
}
#media screen and (max-width: 500px) {
.offer {
display: none;
}
.quote {
width: 100%;
}
.your-yard-left {
float: none;
position: relative;
border-radius: 25px 25px 25px 25px;
top: 260px;
overflow: none;
width: 100%;
}
.your-yard-right {
float: none;
position: relative;
top: 260px;
display: none;
}
}
.your-yard-left {
background-color: #A8CD1B;
float: left;
margin-top: 10px;
padding-right: 2%;
}
.your-yard-left > h2, .your-yard-left > p {
margin-left: 10px;
}
.your-yard-right {
background-color: green;
border-radius: 0 25px 25px 0;
margin-top: 10px;
width: 30%;
float: right;
z-index: 1;
overflow: hidden;
}
.your-yard-right img {
max-height: 150px;
display: block;
text-align: center;
margin: 10px auto;
}
.center {
clear: both;
}
#media screen and (min-width: 1010px) {
.your-yard {
max-width: 1000px;
}
.wrap {
max-width: 1000px;
margin: auto;
}
}
.wrap {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<title>Helping Hand Lawn Care</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--#include virtual="includes/nav.inc"-->
<div class="landscape">
<div class="quote">
<h2>Request A Quote!</h2>
<form>
<input type="text" id="name" placeholder="Name"><br/>
<input type="text" id="email" placeholder="Email"><br/>
<input type="text" id="phone" placeholder="Phone"><br/>
<input type="text" id="address" placeholder="Address"><br/>
<input type="submit" id="submit" value="Submit">
</form>
</div>
<div class="offer">
<h2>We'll Be In Touch</h2>
<p>Drop us a message and we'll have one of our certified landscape technicians come by, inspect your property and give you a quote. Our prices are always fair and our service always top notch. See what </p>
</div>
</div>
<div class="wrap">
<div class="your-yard-left">
<h2 class="center ">Your Yard, Your Pride, Your Way</h2>
<p>Since 2003, Helping Hand Lawn Care has serviced homes, businesses and governmental facilities throughout the Central Florida area in full-service landscape maintenance, installation, irrigation and pest control company. Our team has the experience, knowledge and dedication it takes to invision and execute the projects it takes to get your lawn looking great.<p>
<p>Contact us today to have a landscape professional offer a quote! We offer seasonal and annual packages for all size properties.
</div>
<div class="your-yard-right">
<img src="img/landscape2.jpg">
</div>
</div>
<!--
<div class="center">
<h2>Why Helping Hand?</h2>
<ul>
<li>Quality work</li>
<li>Consistent arrivals</li>
<li>Outstanding customer service</li>
<li>Over 15+ years industry experience</li>
</div>
-->
<script src="js/vendor/jquery.js"></script>
<script src="js/menu.js"></script>
<!-- Other JS plugins can be included here -->
</body>
</html>
I have add one property this media query
#media screen and (max-width: 700px) {
.wrap {
display: inherit !important;
}
}
/*home.css*/
p {
font-family: 'Droid Sans';
font-size: .8em;
}
h1, h2, h1 > a {
font-size: 1.2em;
font-weight: normal;
}
.landscape {
background-image: url("../img/landscape1.jpg");
background-size: cover;
border-radius: 25px;
height: 327px;
margin: 0 auto;
}
/*Styling for the Request A Quote form*/
.quote {
background-color: green;
font-size: .7em;
color: white;
z-index: -1;
}
.quote > h2 {
color: #fff;
font-size: 1.2me
}
input {
display: block;
width:180px;
color:black;
border-radius: 6px;
border: 1px solid #fff;
padding: 7px;
}
#submit {
width: 80px;
}
/*Landscape image settings for large screens*/
#media screen and (min-width: 900px) {
.landscape {
width: 890px;
height: 327px;
max-width: 1000px;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
/*Form styles for large screen*/
#media screen and (min-width: 700px) {
.quote {
float: right;
width: 220px;
height: 327px;
border-radius: 0 25px 25px 0;
padding: 0 15px;
}
.offer {
display: none;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
/*Landscape styles for 700 > 900px screens*/
#media screen and (max-width: 900px) {
.landscape {
height: 327px;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
#media screen and (max-width: 700px) {
.landscape {
width: 100%;
height: 200px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.quote {
position: relative;
top: 200px;
border-radius: 0 0 25px 25px;
padding: 10px 0 10px 0;
height: 240px;
float: none;
width: 60%;
}
form, .quote > h2 {
padding: 0 10px;
}
input {
width: 250px;
}
.offer {
display: block;
float: right;
background-color: #A8CD1B;
position: relative;
top: -60px;
z-index: 1;
width: 40%;
min-width: 120px;
height: 240px;
padding: 10px 20px;
border-radius: 0 0 25px 0;
}
.wrap {
display: inherit !important;
}
.offer > p {
color: black;
font-size: .8em;
}
.your-yard-left {
width: 100%;
display: block;
position: relative;
top: -50px;
border-radius: 25px 0 0 25px;
width: 70%;
}
.your-yard-right {
width: 100%;
display: block;
position: relative;
top: -50px;
height: 260px;
}
}
#media screen and (max-width: 650px) {
.offer {
width: 30%;
}
.quote {
width: 70%;
}
}
#media screen and (max-width: 500px) {
.offer {
display: none;
}
.quote {
width: 100%;
}
.your-yard-left {
float: none;
position: relative;
border-radius: 25px 25px 25px 25px;
top: 260px;
overflow: none;
width: 100%;
}
.your-yard-right {
float: none;
position: relative;
top: 260px;
display: none;
}
}
.your-yard-left {
background-color: #A8CD1B;
float: left;
margin-top: 10px;
padding-right: 2%;
}
.your-yard-left > h2, .your-yard-left > p {
margin-left: 10px;
}
.your-yard-right {
background-color: green;
border-radius: 0 25px 25px 0;
margin-top: 10px;
width: 30%;
float: right;
z-index: 1;
overflow: hidden;
}
.your-yard-right img {
max-height: 150px;
display: block;
text-align: center;
margin: 10px auto;
}
.center {
clear: both;
}
#media screen and (min-width: 1010px) {
.your-yard {
max-width: 1000px;
}
.wrap {
max-width: 1000px;
margin: auto;
}
}
.wrap {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<title>Helping Hand Lawn Care</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--#include virtual="includes/nav.inc"-->
<div class="landscape">
<div class="quote">
<h2>Request A Quote!</h2>
<form>
<input type="text" id="name" placeholder="Name"><br/>
<input type="text" id="email" placeholder="Email"><br/>
<input type="text" id="phone" placeholder="Phone"><br/>
<input type="text" id="address" placeholder="Address"><br/>
<input type="submit" id="submit" value="Submit">
</form>
</div>
<div class="offer">
<h2>We'll Be In Touch</h2>
<p>Drop us a message and we'll have one of our certified landscape technicians come by, inspect your property and give you a quote. Our prices are always fair and our service always top notch. See what </p>
</div>
</div>
<div class="wrap">
<div class="your-yard-left">
<h2 class="center ">Your Yard, Your Pride, Your Way</h2>
<p>Since 2003, Helping Hand Lawn Care has serviced homes, businesses and governmental facilities throughout the Central Florida area in full-service landscape maintenance, installation, irrigation and pest control company. Our team has the experience, knowledge and dedication it takes to invision and execute the projects it takes to get your lawn looking great.<p>
<p>Contact us today to have a landscape professional offer a quote! We offer seasonal and annual packages for all size properties.
</div>
<div class="your-yard-right">
<img src="img/landscape2.jpg">
</div>
</div>
<!--
<div class="center">
<h2>Why Helping Hand?</h2>
<ul>
<li>Quality work</li>
<li>Consistent arrivals</li>
<li>Outstanding customer service</li>
<li>Over 15+ years industry experience</li>
</div>
-->
<script src="js/vendor/jquery.js"></script>
<script src="js/menu.js"></script>
<!-- Other JS plugins can be included here -->
</body>
</html>
So, the addition of
.wrap {
display: inherit !important
}
resolved the issue of differences in Safari and Firefox compared to Chrome. For the problem with the second section rendering vertically I noticed I had included padding-right of 2% to one of the divs without accounting for this in the divs width. Thanks for the help!
I am busy with my portfolio site and I am going to make it responsive.
The most things are responsive but i'm struggling with the contact page.
Code:
.footerContact .informatie
{
float: left;
margin-left: 20%;
margin-top: 10%;
color: white;
width: 250px;
}
.footerContact .form
{
float: right;
margin-right: 20%;
margin-top: 10%;
color: white;
width: 300px;
}
Now i am using a media query to put them under each other when de screen size is smaller as 1115px
Example can be found here
How can i do this?
#media only screen and (max-width: 1115px)
{
.footerContact .informatie
{
float: none;
margin-left: 20%;
margin-top: 10%;
color: white;
width: 250px;
}
.footerContact .form
{
float: none;
margin-left: 20%;
margin-top: 100px;
color: white;
width: 250px;
}
}
Your form is working properly in responsive mode.
You just have to set margin: auto to center align divs.
Fiddle: http://jsfiddle.net/L2mvewLo/1/
Target all devices
#media all and (max-width: 1115px) {
Then either set both to width: 100%; and float: left;
Or float: none; and margin: auto; (to center them).