I'm using this css code for mobile device. In chrome it looks ok, but in FireFox this code isn't running, so my website doesn't change. What should i do?
#media (min-width: 220px) and (max-width: 480px) {
.nav a {
color: #5a5a5a;
font-size: 14px;
padding: 14px 10px;
font-family: 'Open Sans', sans-serif;
}
.nav ul.pull-left{
padding-top: 5px;
padding-left: 80px;
}
.nav ul.pull-right{
padding-top: 30px;
}
.nav li {
display: inline;
padding-bottom: 5px;
}
.nav-account{
background-color: #204056;
}
.nav-account a {
color: #fff;
font-size: 13px;
padding: 14px 10px;
font-family: 'Open Sans', sans-serif;
}
.nav-account ul.pull-right{
padding-top: 10px;
}
.nav-account li {
display: inline;
padding-bottom: 10px;
}
.site-header {
width: 100%;
height: 100%;
min-height: 50vh;
position: relative;
text-align: center;
background: url(../images/novotel.jpg) no-repeat center center/cover;;
}
}
I think you need to add the media type after "#media".
Try #media all and (min-width: 220px) and (max-width: 480px) {
...
}
Related
This is full css of the code. On tablet and on the computer it looks good but not on the mobile device when the website is published. Logo and h1 are not responsive. This is full css of the code. On tablet and on the computer it looks good but not on the mobile device when the website is published. Logo and h1 are not responsive.
body {
margin: 0;
padding: 0;
}
/* header */
.logo-img {
width: 420px;
}
h1 {
text-align: right;
font-family: 'Abel', sans-serif;
font-size: 35px;
margin-top: 20px;
color: #1a1a1a;
text-transform: uppercase;
}
h2 {
text-align: right;
font-family: 'Abel', sans-serif;
font-size: 21px;
color: #1a1a1a;
font-weight: 100;
text-transform: uppercase;
letter-spacing: 6px;
}
.line {
width: 97.5%;
}
/* end header */
/* content */
.main-img {
width: 100%;
}
p {
text-align: center;
margin-top: 10px;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-weight: 100;
color: #1a1a1a;
}
.copy {
font-size: 15px;
font-weight: 100;
font-family: 'Quicksand', sans-serif;
}
/* #map {
width: 55%;
height: 200px;
box-sizing: border-box;
text-align: right;
} */
/* end content */
/* footer */
.footer-img {
width: 350px;
margin-right: 15px;
}
h3 {
text-align: center;
font-family: 'Abel', sans-serif;
font-size: 30px;
color: #5d75ab;
text-decoration: none;
margin-top: 10px;
text-transform: uppercase;
}
h4 {
text-align: center;
margin-top: 30px;
text-transform: uppercase;
letter-spacing: 2px;
font-family: 'Abel', sans-serif;
font-size: 24px;
font-weight: 100;
color: #1a1a1a;
}
h5 {
text-align: center;
margin-top: 30px;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-weight: 100;
color: #1a1a1a;
}
a href {
text-align: center;
}
a:link {
color: #5d75ab;
text-decoration: none;
}
a:visited {
color: #5d75ab;
text-decoration: none;
}
a:hover {
color: #5d75ab;
text-decoration: none;
color: #1a1a1a;
}
a:active {
color: #5d75ab;
text-decoration: none;
}
.footer-img-container,
.top-row {
margin-top: 30px;
}
.link {
text-align: center;
display: block;
}
/* end footer */
/* Mobile Phone Responsiveness - Nexus 5 */
#media screen and (max-width: 414px) {
h1 {
font-size: 14px !important;
line-height: 80%;
margin-top: 10px;
}
h2 {
font-size: 11px;
letter-spacing: 1.2px;
}
p {
font-size: 12px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 10px;
}
h5 {
font-size: 11px;
}
.logo-img {
width: 180px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 90%;
}
.copy {
font-size: 10px;
font-weight: 100;
font-family: sans-serif;
}
}
/* Tablet Responsiveness - IPad */
#media screen and (min-width:416px) and (max-width: 768px) {
h1 {
font-size: 25px;
margin-top: 0px;
}
h2 {
font-size: 20px;
letter-spacing: 2px;
}
p {
font-size: 16px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 12px;
}
.logo-img {
width: 250px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 95%;
}
.copy {
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
}
}
You can use bootstrap image responsive class.
<img src="images/logo.png" alt="logo" class="img-responsive"/>
And for H1 tag you can use media query to make it responsive font size.
h1 {
font-size: 22px;
}
.img-responsive {
width: 100%;
max-width: 200px
}
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
.img-responsive {
width: 100%;
max-width: 100px
}
}
<img src="https://www.freelancingdesign.com/wp-content/uploads/2015/04/fd-theme-590x300.jpg" alt="logo" class="img-responsive" />
<h1>Logo Goes here</h1>
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
}
Make sure the media query css should be below the main css then it will work, Sequence is matter.
Hope this helpful.
/*Desktop responsive*/
.logo-img {
width: 260px;
}
h1 {
font-size: 58px !important;
line-height: 80%;
margin-top: 10px;
}
/* Mobile Phone Responsiveness */
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
h2 {
font-size: 9px;
letter-spacing: 1.2px;
}
p {
font-size: 12px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 8px;
}
h5 {
font-size: 11px;
}
.logo-img {
width: 160px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 90%;
}
.copy {
font-size: 10px;
font-weight: 100;
font-family: sans-serif;
}
}
<!DOCTYPE html>
<html lang="sh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Frigo MMB</title>
</head>
<body>
<!-- header -->
<div class="container">
<div class="row top-row">
<div class="col-md-6">
<img src="https://www.stickpng.com/assets/images/580b57fcd9996e24bc43c529.png" alt="logo img" class="logo-img">
</div>
<div class="col-md-6">
<h1>Hladjenje & <span style="color: #5d75ab">Klimatizacija</span></h1>
<h2>011.8525636 | 063.7591345</h2>
</div>
</div>
</body>
</html>
May some of the existing code overwriting your h1 tag so i have added !important it will help overwrite the other h1 class.
Hope this snippet will help you.
You can try something like this, if image have width of 400px, then use:
#media screen and (max-width: 400px) {
img {
width: 100%;
}
}
You may need to use different selector for img, same that set the width in your other CSS if you set it.
With header you can put it above the image if it's next to image on desktop.
I want to add a call support button to my webpage that has responsive design. I want to show the button only when the webpage is in mobile view and replace it with a line of text when it is not mobile view.
I'm having problems showing/hiding the button for the responsive webpage.
Here's my attempt:
contact page:
<div>
<p class ="Call-Customer-Support">Call customer support at 555-555-5555. </p>
<div class="Rectangle">
<img class="call icon-image" src="images/call.png" />
<a class="Call-Support" href="tel:555-555-5555">Call Support</a>
</div>
</div>
where in my style.css:
.Call-Customer-Support {
width: 709px;
height: 18px;
font-family: BentonSans-Bold;
font-size: 16px;
font-style: normal;
font-stretch: normal;
color: #ffffff;
margin: 50px auto;
}
.Rectangle {
width: 292px;
height: 57px;
border-radius: 8px;
background-color: #0e74af;
margin: 50px auto;
}
.call {
width: 24px;
height: 24px;
object-fit: contain;
margin-left:72px;
margin-top:16px;
vertical-align:middle;
float: left;
}
.Call-Support {
width: 116px;
height: 23px;
font-family: BentonSans-Regular;
font-size: 20px;
font-style: normal;
font-stretch: normal;
color: #ffffff;
margin-left: 8px;
vertical-align:middle;
text-decoration: none;
float:left;
display:block;
margin-top:17px;
}
and in my responsive.css:
#media only screen and (max-width: 767px) {
.Rectangle {
width: 292px;
height: 57px;
border-radius: 8px;
background-color: #0e74af;
margin: 50px auto;
}
.call {
width: 24px;
height: 24px;
object-fit: contain;
margin-left:72px;
margin-top:16px;
vertical-align:middle;
float: left;
}
.Call-Support {
width: 116px;
height: 23px;
font-family: BentonSans-Regular;
font-size: 20px;
font-style: normal;
font-stretch: normal;
color: #ffffff;
margin-left: 8px;
vertical-align:middle;
text-decoration: none;
float:left;
display:block;
margin-top:17px;
}
}
#media only screen and (max-width: 479px) {
.Rectangle {
width: 292px;
height: 57px;
border-radius: 8px;
background-color: #0e74af;
margin: 50px auto;
}
.call {
width: 24px;
height: 24px;
object-fit: contain;
margin-left:72px;
margin-top:16px;
vertical-align:middle;
float: left;
}
.Call-Support {
width: 116px;
height: 23px;
font-family: BentonSans-Regular;
font-size: 20px;
font-style: normal;
font-stretch: normal;
color: #ffffff;
margin-left: 8px;
vertical-align:middle;
text-decoration: none;
float:left;
display:block;
margin-top:17px;
}
}
For all other sizes, I set these properties:
.Rectangle {visibility:hidden}
.call {visibility:hidden}
.Call-Support{visibility:hidden}
However, it has no effect on the visibility of the items displayed...
here I added basic implementation of what you try to achieve
.call-support {
display: inline-block;
padding: 5px 10px;
background: #aaa;
color: white;
font-family: Arial;
text-transform: uppercase;
text-decoration: none;
border-radius: 5px;
}
.support {
text-align: center;
}
.show-large {
display: none;
}
#media only screen and (min-width: 767px) {
.show-large {
display: block;
}
.show-mobile {
display: none;
}
}
<div class='support'>
<a class="call-support show-mobile" href="tel:555-555-5555">Call Support</a>
<span class='show-large'>Call customer support at 555-555-5555.</span>
</div>
visibility is not enough to hide an element. You need to specify display:none; for it to be trully hidden.
In you example you can change the display property of the button to block inside the responsive file and display:none for the text. In the main css file you need to do exactly the opposite.
Also you can remove all duplicate code between files as both, I pressume, are included in the site (for example width,height etc.).
So the responsive file can be recuced to this code:
#media only screen and (max-width: 767px) {
.Rectangle {
display:block;
}
.Call-Customer-Support {
display:none;
}
}
I tried a lot, but wasn't able to fix it. I am not able to align the header and footer.
JSFIDDLE: http://jsfiddle.net/80hrz44f/
I get this layout for the custom css code given below
body{
font-family: 'Sorts Mill Goudy', sans-serif;
padding-top: 40px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
font-family: 'Sorts Mill Goudy', sans-serif;
color: #ddd;
}
.navbar .navbar-collapse {
text-align: center;
font-family: 'Sorts Mill Goudy', sans-serif;
color: #ddd;
}
#media (min-width: 1200px) {
.container{
max-width: 850px;
}
}
header{
background-color: #333;
}
footer{
background-color: #333;
color: #ddd;
padding: 20px;
text-align: center;
}
aside{
background-color: #0000;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
But when I add the following header part to the custom CSS code, I get the following layout
header{
background-color: #333;
}
Add this style in your css file
header.container {
padding: 0;
}
modify like this
.container
{
padding-left:0; //in your code 15px;
padding-right:0; //in your code 15px;
}
.navbar
{
margin-bottom:20px; // remove this
}
I don't know whats wrong with my code? The font weight changes when I'm on windows, but it stays the same on my android and mac. I've also attempted to change the font face because I that it might have been that windows doesn't come installed with the helvetica font.
#font-face {
font-family: Helvetica;
src: url(Helvetica.dfont);
}
a,p{
text-decoration: none;
font-weight: normal;
font-family: Helvetica;
font-size: 12px;
}
li{
list-style-type: georgian;
font-family: Helvetica;
font-weight: lighter;
padding-top: 5px;
}
h3{
font-weight: lighter;
font-family: Helvetica;
margin: 0px;
}
hr{
height: 2px;
background-color: lightgray;
border: 0px;
}
/*MOBILE SUPPORT*/
#media screen and (max-width: 414px) and (min-width: 337px) {
#headnav{
text-align: center;
margin-right: 40px;
}
#updatelog{
margin-top: 10px;
}
img.footer_pi{
width: 90%;
height: 90%;
}
}
/*END OF MOBILE SUPPORT*/
/*wrappers*/
.wrapper{
margin: 0 auto;
padding: 10px;
display: block;
max-width: 750px;
}
footer.wrapper{
overflow: hidden;
}
/*end of wrappers*/
/*homepage*/
#updatelog{
margin-top: 10px;
margin-left: 5px;
}
#robotics_notes{
max-width: 100%;
width: auto;
}
article#home_article > img{
float: left;
}
article#home_article > p{
padding-top:10px;
clear: both;
}
article#home_article > aside{
display: inline-block;
}
#homepage_header{
font-family: Helvetica;
font-weight: 300;
}
#selected{
background-color: #65448C;
}
div>h1{
margin: 0 auto;
text-align: center;
}
li > a{
color: #ED1148;
padding: 8px;
}
ul#headnav > li{
list-style-type: none;
display: inline-block;
}
li > a:hover{
background-color: #ED1148;
}
li:hover a {
color: white;
}
/*end of homepage*/
/*login*/
#middle{
background-color: #E6CCCC;
padding-top: 30px;
width: 25%;
min-width: 249px;
}
.login{
text-align: center;
}
button.login{
font-family: Helvetica;
margin-top: 10px;
margin-bottom: 7px;
}
h2.login{
color: #6A1B1B;
display:block;
padding: 0px;
margin-top: 0px;
}
/*end of login*/
/*footer*/
a.footer_pi{
width: auto;
max-width: 100%;
visibility: visible;
float: right;
}
img.footer_pi{
opacity: 0.65;
transition: opacity .5s ease-in;
}
img:hover{
opacity: 1;
}
/*end of footer*/
http://intimite.biz.tm/
I have used many suggested methods to ensure my footer stays at the bottom and it does however when i re-size the window to make it smaller the footer does not get pushed off the page due to the position: fixed; i am using but otherwise it does not stay at at the bottom of the page at normal size as the content does not fill the whole page.
Can you help?
EDIT:
CSS
html, body {
margin:0;
padding:0;
height: 100%;
}
#container {
}
#spacer {
height: 10px;
background-color: #24246B;
}
#font-face {
font-family: palatino;
src: url('font/palatino.ttf');
}
#font-face {
font-family: footer;
src: url('font/footer.ttf');
}
.fb_widget {
float: right;
margin-right: 10px;
}
#header, #nav, article, section, body, #mail_success {
font-family: palatino;
}
#header {
margin-top: 1%;
text-align: center;
/* font-size: 60px;
color: #F2E6FF;
border: solid #24246B;
background-color: #24246B;
width: 25.5%;
border-right-color: #4610B3;
border-right-width: 25px;
border-left-width: 15px;
margin-top: 2%;
text-align: right;*/
}
#nav ul {
margin-top: 2%;
line-height: 30px;
font-size: 17px;
text-align: center;
background-color: #24246B;
}
#nav ul li {
display: inline;
}
#nav ul li a {
text-decoration: none;
color: #F2E6FF;
padding: 7px 2% 6px 2%;
font-weight: bold;
border-radius: 20%;
/* This makes it fade colour*/
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition:. 5s;
-webkit-transition: .5s;
transition: .5s;
}
#nav a:hover {
color: #24246B;
background-color: #F2E6FF;
border-radius: 20%;
}
body {
background-image: url('media/bg.png');
padding-bottom: 60px;
height: 100%;
max-height: 100%;
}
article {
color: #24246B;
margin-left: 20%;
margin-right: 20%;
font-size: 20px;
font-weight: bold;
}
section {
font-weight: normal;
font-size: 15px;
text-align: justify;
padding-left: 2%;
}
form {
padding-left: 7%;
font-size: 19px;
}
input {
height: 25px;
width: 300px;
font-size: 14px;
}
.contact_submit {
width: 110px;
margin-right: 50%;
margin-left: 42%;
}
label {
text-align: right;
float: left;
display: block;
width: 260px;
font-weight: bold;
}
label:after {
content: "..";
color: transparent;
}
#push {
height: 4em;
}
footer {
font-family: footer;
color: #cccccc;
font-size: 8px;
text-transform: uppercase;
font-style: italic;
text-align: center;
height: 4em;
}
footer:hover {
/* This makes it transition*/
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition:. 5s;
-webkit-transition: .5s;
transition: .5s;
color: #24246B;
font-size: 12px;
}
#mail_success {
text-align: center;
padding: 7%;
font-size: 17px;
font-weight: bold;
}
#media screen and (max-device-width: 640px) {
#logo {
display: none;
}
}
HTML
<div id="push"></div>
</div>
<p></p>
<footer>
<p>©2013 Built by Rob **</p>
<p>Designed by Akash ** & Rob **</p>
</footer>
</body>
Here is your solution.Use sticky footer.Include the below css file in your code
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Hope it will help you.
Also here is a link for more details
Link
You did not paste in your code or give us a jsfiddle, so here is what I think you should do.
In your css, use media queries and change how the footer appears based on the screen width.
Portrait Tablet
#media (min-width: 481px) and (max-width: 768px)
Landscape smart phone
#media (min-width: 321px) and (max-width: 480px)
Portrait smart phone
#media (max-width: 320px)
Using those, set:
#footer{
position:whatever you want;
}
FYI, you're not constrained to those sizes, those are just the common ones, customize them how you want.