Well I'm pretty new to responsive design so please forgive me if I ask stupid questions.
So I was creating a website for myself in Dreamweaver. The desktop version of my site looks okay but whenever I open it using my phone or my tablet, the elements do not scale properly.
I've used Media Queries and the site looks okay in Responsive Design mode of Firefox, but in actual devices they do not.
This is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="css/main.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400|Raleway:300,400,500|Roboto:100,400,500,700" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="intro">
<div class="col-xs-12 text-center">
<div class="heading">
Hi
</div>
<div class="para">
Here goes a brief description about myself and what I do.
</div>
<div class="knowMe">
<input class="button" type="button" name="getToKnowMe" value="Get to know me"/>
</div>
<div class="start">
<a href="#">
or contact me
</a>
</div>
</div> <!--col-xs-->
</div> <!--intro-->
</div> <!--container fluid-->
</body>
</html>
And this is my main.css:
*{
font-family: roboto;
}
a, a:hover, a:link, a:active, a:visited{
color: white !important;
text-decoration: none !important;
}
html{
font-size: 16px;
}
.container-fluid{
padding: 0 !important;
}
.intro{
background: linear-gradient(#E93D1D,#E95236);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
width: 100%;
color: white;
padding: 5em;
height: 48em;
}
.intro .heading{
margin-top: 0.2em;
font-size: 8em;
font-weight: 100;
text-align: center;
}
.intro .para{
font-size: 2.5em;
font-weight: 100;
text-align: center;
}
.intro .start{
font-size: 1.5em;
font-weight: 100;
text-align: center;
text-decoration: underline;
text-decoration-color: white;
text-decoration-style: dotted;
}
.intro .button{
box-sizing: content-box;
cursor: pointer;
padding: 1em 2.5em;
border: 2px solid white;
border-radius: 50px;
font-size: 1.5em;
font-weight: 300;
color: white;
text-overflow: clip;
margin: 3em 2em 0.75em 2em;
background: none;
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
.intro .button:hover{
border: 2px solid white;
border-radius: 5px;
background: white;
color: #E95236;
}
#media only screen and (max-width: 320px){
.intro{
padding: 1em;
height: 41em;
}
.intro .heading{
font-size: 5em;
padding-top: 1em;
}
.intro .para{
font-size: 1.5em;
}
.intro .button{
font-size: 1.2em;
padding: 0.8em 0.8em;
}
.intro .start{
font-size: 1em;
}
}
#media only screen and (min-width: 321px) and (max-width:375px){
.intro{
padding: 1em;
height: 48em;
}
.intro .heading{
font-size: 8em;
padding-top: 0.65em;
}
.intro .para{
font-size: 2em;
}
.intro .button{
font-size: 1.5em;
padding: 0.75em 0.75em;
}
.intro .start{
font-size: 1.2em;
}
}
#media only screen and (min-width: 376px) and (max-width:414px){
.intro{
padding: 1em;
height: 53em;
}
.intro .heading{
font-size: 8em;
padding-top: 1em;
}
.intro .para{
font-size: 2em;
}
.intro .button{
font-size: 1.5em;
padding: 0.75em 1.2em;
}
.intro .start{
font-size: 1.2em;
}
}
This is how my website looks in Firefox Responsive Design Mode:
https://image.ibb.co/jCr54k/moz.jpg
This is how it looks in my iPhone SE:
https://image.ibb.co/ihA4x5/IMG_1675.png
It'd be great if someone could just tell me what I'm doing wrong.
Thanks
try adding this class
html,body{
width:100%;
height:100vh;
/* or just add*/
background-color: #e94224;
/* and no need to use those classes */
}
.container-fluid {
padding: 0 !important;
height: 100%;
display: inline-block;
}
.intro {
/* change the height from 48em to 100% */
height: 100%;
}
It all seems fine to me, with the exception of body not having any height.
try adding css:
body {
height: 100%;
}
UPDATE: Never mind, this won't be enough. You've got some heights set in other places.
Related
This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed last year.
I'm experimenting with CSS in a codecademy project, and I noticed that when I set a footer to have fixed positioning (with no left/right/top/bottom properties set), it just disappears. I would expect it to just shrink the way it does with absolute positioning, but it doesn't. Without fixed positioning the footer is there where it should be, but with it, it's gone. Why is it behaving this way?
The footer in question is selected in the CSS in the footer ruleset.
Here's the codepen: https://codepen.io/megas4ever/pen/ExwEEzv
And here's the full code:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'/>
<style>
html, body {
margin: 0;
padding: 0;
}
header {
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav {
margin: 0;
padding: 20px 0;
}
nav li {
display: inline-block;
width: 80px;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
}
main {
text-align: center;
position: relative;
top: 80px;
}
main h1 {
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0px;
padding-top: 80px;
margin-bottom: 80px;
text-transform: uppercase;
}
footer {
background-color: #333;
color: #fff;
padding: 30px 0;
position: fixed;
}
footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
text-align: center;
}
.jumbotron {
height: 800px;
background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
font-family: 'Raleway', sans-serif;
text-align: center;
display: inline-block;
width: 200px;
height: 200px;
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 20px;
margin-bottom: 20px;
}
.supporting a {
background-color: white;
color: #333333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 1.3px;
text-decoration: none;
text-transform: uppercase;
padding: 10px;
margin-bottom: 10px;
border: 2px solid #333333;
}
#media (max-width: 500px) {
main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
</ul>
</nav>
</header>
<main>
<div class="jumbotron">
<div class="container">
<h1>We are Broadway</h1>
Get Started
</div>
</div>
</main>
<section class="supporting">
<div class="container">
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/design.svg">
<h2>Design</h2>
<p>Make your projects look great and interact beautifully.</p>
Learn More<br>
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/develop.svg">
<h2>Develop</h2>
<p>Use modern tools to turn your design into a web site</p>
Learn More<br>
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/deploy.svg">
<h2>Deploy</h2>
<p>Use modern tools to turn your design into a web site</p>
Learn More<br>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© Broadway 2017</p>
</div>
</footer>
</body>
</html>
Well, you've kind of hinted at the problem yourself already.
I noticed that when I set a footer to have fixed positioning (with no
left/right/top/bottom properties set), it just disappears.
Just because you haven't provided left/right/top/bottom properties, doesn't mean they are not in effect.
In this case, the default values (which most likely reflect the effective top/left values with the default position: static) are just not ideal.
Since the footer takes up the full width of the screen, the left value likely defaults to 0; this is fine and that's not the source of the problem.
But, since the footer is located on the bottom of your site, its auto/default top value max well be like 2000px -> you have to scroll down to even be able to see it.
Once you enabled fixed positioning, and didn't provide any top value yourself, that number would still be top: 2000px. And since it's now fixed in place, scrolling has no effect on it, which means its permanently located outside of your viewport. If your browser window was to be >2000px high, you would be able to see it, just hovering along by itself way below the rest of the site.
As Raxi has pointed out in the answer the rule of thumb is position:absolute affixes it self to parent element axis.
BUT
position:fixed affixes it self to the view port it does not care about anything else in between.
So when you adding position:fixed its goes to viewport which can be any thing based on your device or what ever as Raxi pointed out.
SIMPLyPUT its there but not in your field of vision becuase it made up its own mind where to place it self in empty vast space of view port.
NOW if we give it some coordinates it will behave as expected that is bootom:0; example below. but there is another problem hope you can pick it up.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'/>
<style>
html, body {
margin: 0;
padding: 0;
}
header {
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav {
margin: 0;
padding: 20px 0;
}
nav li {
display: inline-block;
width: 80px;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
}
main {
text-align: center;
position: relative;
top: 80px;
}
main h1 {
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0px;
padding-top: 80px;
margin-bottom: 80px;
text-transform: uppercase;
}
footer {
background-color: #333;
color: #fff;
padding: 30px 0;
position: fixed;
bottom:0;
}
footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
text-align: center;
}
.jumbotron {
height: 800px;
background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
font-family: 'Raleway', sans-serif;
text-align: center;
display: inline-block;
width: 200px;
height: 200px;
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 20px;
margin-bottom: 20px;
}
.supporting a {
background-color: white;
color: #333333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 1.3px;
text-decoration: none;
text-transform: uppercase;
padding: 10px;
margin-bottom: 10px;
border: 2px solid #333333;
}
#media (max-width: 500px) {
main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
</ul>
</nav>
</header>
<main>
<div class="jumbotron">
<div class="container">
<h1>We are Broadway</h1>
Get Started
</div>
</div>
</main>
<section class="supporting">
<div class="container">
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/design.svg">
<h2>Design</h2>
<p>Make your projects look great and interact beautifully.</p>
Learn More<br>
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/develop.svg">
<h2>Develop</h2>
<p>Use modern tools to turn your design into a web site</p>
Learn More<br>
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/deploy.svg">
<h2>Deploy</h2>
<p>Use modern tools to turn your design into a web site</p>
Learn More<br>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© Broadway 2017</p>
</div>
</footer>
</body>
</html>
PROBLEM when we added position:fixed and gave coord bottom:0 footer did find its elf in field view of view port but it has resized the width as it was display:inline element not as an display:block element.
its quirk mode sort of problem we have work arounds e.g. giving left:0; right:0; bottom:0; would sort of display as if block element, better option would be to give it width:100% 100% based on view port size etc which works great if there is no desired margin around body tag which 99% of websites specifically dont just as in your case example below;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'/>
<style>
html, body {
margin: 0;
padding: 0;
}
header {
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav {
margin: 0;
padding: 20px 0;
}
nav li {
display: inline-block;
width: 80px;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
}
main {
text-align: center;
position: relative;
top: 80px;
}
main h1 {
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0px;
padding-top: 80px;
margin-bottom: 80px;
text-transform: uppercase;
}
footer {
background-color: #333;
color: #fff;
padding: 30px 0;
position: fixed;
bottom:0;
width:100%;
}
footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
text-align: center;
}
.jumbotron {
height: 800px;
background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
font-family: 'Raleway', sans-serif;
text-align: center;
display: inline-block;
width: 200px;
height: 200px;
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 20px;
margin-bottom: 20px;
}
.supporting a {
background-color: white;
color: #333333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 1.3px;
text-decoration: none;
text-transform: uppercase;
padding: 10px;
margin-bottom: 10px;
border: 2px solid #333333;
}
#media (max-width: 500px) {
main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
</ul>
</nav>
</header>
<main>
<div class="jumbotron">
<div class="container">
<h1>We are Broadway</h1>
Get Started
</div>
</div>
</main>
<section class="supporting">
<div class="container">
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/design.svg">
<h2>Design</h2>
<p>Make your projects look great and interact beautifully.</p>
Learn More<br>
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/develop.svg">
<h2>Develop</h2>
<p>Use modern tools to turn your design into a web site</p>
Learn More<br>
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/deploy.svg">
<h2>Deploy</h2>
<p>Use modern tools to turn your design into a web site</p>
Learn More<br>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© Broadway 2017</p>
</div>
</footer>
</body>
</html>
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.
In the mobile version (width max 411px) when I create a navbar and I use absolute position when the dropdown active, why the background color don't cover all the element inside nav div?
Codepen <<-- Here's the codepen version
I've using overflow hidden and still doesn't work
$(document).ready(function(){
$('.navbar-burger').click(function(){
$('.inactive').toggleClass('active-nav');
$('.navbar-burger').toggleClass('inactive');
$('.navbar-close').toggleClass('close-navi');
$('.header').toggleClass('border-bg');
})
$('.navbar-close').click(function(){
$('.inactive').removeClass('active-nav');
$('.navbar-burger').removeClass('inactive');
$('.navbar-close').removeClass('close-navi');
$('.header').removeClass('border-bg');
})
})
*{
font-family: 'Open Sans Light', sans-serif;
color: black;
}
body{
margin: 25px 60px;
background-color: #fafafa;
font-size: 16px;
}
.header{
float: right;
transition: 0.4s ease-in-out;
}
.navbar{
font-size: 1.2em;
}
.navbar ul{
list-style: none;
margin: 0px;
padding: 0;
}
.navbar ul li{
display: inline-block;
margin: 0px 15px;
}
.navbar ul li a{
text-decoration: none;
}
.navbar ul li a:hover{
color: #70BCFF;
}
.content{
width: 100%;
display: grid;
grid-template-columns: 50% 50%;
padding: 70px 0px;
cursor: default;
}
.welcome-message h1{
font-size: 5.3em;
margin: 0px;
}
.welcome-message h2{
font-size: 2.15em;
font-weight: 100;
margin: 0px;
line-height: 60px;
color: #707070;
}
.welcome-message h4{
font-size: 1.0625em;
color: #8D8D8D;
margin-left: 4px;
}
.welcome-message p{
font-size: 1.0625em;
color: #8D8D8D;
margin-left: 4px;
}
.expand-bio{
background-color: #fff;
border: 0.3px solid rgba(0, 0, 0, .16);
font-size: 1.0625em;
padding: 20px 30px;
box-shadow: rgba(0, 0, 0, .16) 2px 7px 8px;
border-radius: 15px;
margin-left: 4px;
cursor: pointer;
}
.expand-bio:hover{
box-shadow: rgba(0, 0, 0, .16) 2px 7px 14px;
}
.ava{
display: grid;
grid-template-areas: 100%;
}
.ava img{
width: 70%;
overflow: hidden;
align-self: center;
justify-self: center;
margin: 0px;
}
.navbar-burger,.navbar-close{
display: none;
}
.active a{
color: #70BCFF;
}
/* Responsive Design */
#media only screen and (max-width: 1140px){
body{
font-size: 11px;
}
}
/* iPad && iPad Pro && another tablet */
#media only screen and (max-width: 1024px) and (max-height: 1366px){
body{
font-size: 20px;
}
.content{
grid-template-columns: 100%;
grid-template-rows: 50% 50%;
}
.ava{
grid-area: 1/1;
margin-bottom: 80px;
}
.welcome-message h1, .welcome-message h2, .welcome-message h4, .welcome-message p{
text-align: center;
}
.welcome-message h4{
margin-top: 15px;
}
.expand-bio{
display: block;
margin: 0 auto;
margin-top: 26px;
}
}
/* ================= */
#media only screen and (max-width: 412px){
body{
margin: 25px 10px;
font-size: 20px;
}
.navbar-burger{
position: absolute;
display: block;
right: 20px;
cursor: pointer;
}
.close-navi{
position: absolute;
display: block;
right: 20px;
cursor: pointer;
}
.navbar ul li{
padding-bottom: 15px;
}
.inactive{
display: none;
}
.active-nav{
display: block;
position: absolute;
}
.header{
float: left;
width: 100%;
}
.border-bg{
background-color: #aaa;
}
.content{
padding-top: 0px;
}
}
<!DOCTYPE html>
<head>
<title>Ananda Vijaya</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/b1643406ad.js"></script>
</head>
<body>
<div class="header">
<div id="navbar" class="navbar">
<span class="navbar-burger"><i class="fas fa-bars"></i></span>
<span class="navbar-close"><i class="fas fa-times"></i></span>
<ul class="nav">
<li class="active">Introduction</li>
<span class="inactive">
<li>Finished Project List</li>
<li>Contact Me</li>
</span>
</ul>
</div>
</div>
<div class="content">
<div class="welcome-message">
<h1>Hi There~</h1>
<h2>This is the Place Where You Can Get to<br>Know Me Better</h2>
<h4>Ananda Vijaya || Web Developer</h6>
<p>I'm a Front-end Developer Who Currently a College Student<br>Majoring in Computer Science at Diponegoro University</p>
<button class="expand-bio">My Complete Profile</button>
</div>
<div class="ava">
<img src="ava.png">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
I expect to have all the element (navbar menu) get the gray background color
I'm trying to position a circular instagram icon so it is always centered towards the bottom of a landing page. All my efforts so far such as using position:fixed; have resulted in the icon not remaining underneath the rest of my content when the screen size changes.
My html is like this:
<!DOCTYPE html>
<html>
<head>
<title>RBM Makeup</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
</body>
</html>
And my CSS is like this:
:root{
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face{
font-family: 'milkshake';
src:url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face{
font-family: 'amble';
src:url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro{
height:100%;
width:100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1{
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container{
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a{
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 40px;
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover{
opacity:0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
left: 47.5%;
}
Any help would be greatly appreciated, thanks :)
Modified two places of your code.
1. .foot
left: 50% plus margin-left: - { width } / 2 can make footer align center no matter how the window changes.
```
.footer {
position: fixed;
bottom: 0;
width: 95px; // here
height: 100px;
left: 50%; // here
margin-left: calc(-95px / 2); // here
}
```
2. .fa
In your code, the Instagram icon is not aligning center inside the black circle, so I make some changes for it.
As the Instagram icon is square, you should not set the width 40px when it's font-size is 55px.
```
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* here */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
```
If you have more questions about my answer, feel free to contact me :)
:root {
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face {
font-family: 'milkshake';
src: url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: 'amble';
src: url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro {
height: 100%;
width: 100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1 {
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container {
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a {
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* need to fit the font-size */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover {
opacity: 0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer {
position: fixed;
bottom: 0;
width: 95px;
height: 100px;
left: 50%;
margin-left: calc(-95px / 2);
}
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
set the parent as
.intro {
width:100%;
height:100vh;
position:relative;
}
and the icon element as
.footer {
position:absolute;
bottom:0;
left:50%;
width:40px;
margin-left:-20px;
}
as an alternative:
.footer {
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}
.footer > div {
display:inline-block;
}
this will do better as you can add other elements if you end up wanting to add other links
I have been fighting with a jumbotron background image which I managed to properly line up on the website but I can't seem to make it be mobile responsive. The link for the site is puremistdiffusers.com
Here is the HTML:
<div class="jumbotron" style="background-image: url(https://puremistdiffusers.com/wp-content/uploads/2017/02/slider-candle-jpeg-dark.jpg); background-repeat: no-repeat;">
<div class="container">
<h1 class="text-uppercase">YOUR AROMATHERAPY</h1>
<p>UP TO 40% OFF ON ALL PRODUCTS</p>
<a class="btn btn-default btn-inverse btn-lg text-uppercase topbutton" href="https://puremistdiffusers.com/product/" role="button">Shop Now</a>
</div>
</div>
and here is the CSS:
}
.jumbotron {
background-color: #fff !important;
}
.jumbotron {
padding-top: 48px;
padding-bottom: 48px;
height: 397px !important;
background-position: center;
width: 100%;
}
.jumbotron .container {
max-width: 100%;
}
.jumbotron h1, .jumbotron .h1 {
color: #fff;
font-size: 50px !important;
text-align: center;
}
.jumbotron h1, .jumbotron .h1 {
color: #fff;
font-family: "Adobe Garamond Pro", "Adobe Caslon Pro", Helvetica, Arial, sans-serif;
font-size: 1.5rem;
}
.jumbotron p {
margin-bottom: 15px;
font-size: 30px;
font-weight: 400;
color: #fff;
text-align: center;
}
.btn-default.btn-inverse {
color: #FFFFFF;
background-color: #162e00;
border-color: #FFFFFF;
}
.topbutton {
padding: 1% 6%;
font-size: 20px;
line-height: 2.375rem;
border-radius: 0.1875rem;
margin-left: 38%;
margin-top: 3%;
}
.btn:hover{
background:transparent;
color:#fff;
}
#media (max-width:768px){
.jumbotron h1, .jumbotron .h1 {
color: #fff;
font-size: 30px !important;
}
.jumbotron p {
font-size: 17px;
}
.jumbotron {
height: 259px !important;
}
.btn {
margin-left: 30%;
}
}
#media (max-width:640px){
.jumbotron h1, .jumbotron .h1 {
color: #fff;
font-size: 20px !important;
}
.jumbotron p {
font-size: 12px;
}
.jumbotron {
height: 259px !important;
}
.btn {
margin-left: 30%;
}
}
#media (max-width:480px){
.jumbotron h1, .jumbotron .h1 {
color: #fff;
font-size: 17px !important;
}
.jumbotron p {
font-size: 12px;
}
.jumbotron {
height: 259px !important;
}
.btn {
margin-left: 30%;
}
}
I tried several different techniques that I found here on stackoverflow but I would either get everything to line up on the left and not be centred or centre everything but loose the mobile responsiveness. Thanks in advance.
Ok , to add this lines :
.jumbotron {
background-image: url('your image background');
height: 100%;
width: 100%;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
and in your head tag in html add this :
<meta name="viewport" content="width=device-width, initial-scale=1">