I want my background to take up all the space on the ipad views when making my webpage responsive. It works fine for mobile phones but with tablets it cuts off and the image won't take up the entire space. I think it may have something to do with me having one of my media queries set at a max width of 1024px but I don't know I am new to responsive design plus it says I need to type more details. Hopefully all of this makes sense.
<body>
<div class="bg"></div>
<header>
<section class="title">
<div class="title__step2">
<h1 class="title__head">Step 2</h1>
</div>
<div>
<h1>
Choose your City
</h1>
<p>Welcome to Step Number 2! You're almost there, just tell us which city you are interested in moving to and we can make it happen!</p>
</div>
</section>
</header>
</body>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
margin: 0;
background-repeat: no-repeat;
background-size: cover;
height: 95vh;
}
:root {
--main-color: rgba(255, 111, 15, 0.8)
}
.title {
margin-top: 2.5%;
margin-left: 12.5%;
text-align: center;
border: 2px solid black;
width: 75%;
background: var(--main-color);
color: white;
font-family: 'Roboto', sans-serif;
font-size: larger;
}
.title__head {
width: 100%;
margin-top: 0;
padding-top: 7px;
padding-bottom: 7px;
background: white;
color: var(--main-color);
font-family: 'Roboto', sans-serif;
}
#media screen and (max-width: 1024px) {
.bg {
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
width: 100vw;
height: 100vh;
position: fixed;
z-index: -1;
}
.title {
margin-top: 2rem;
margin-left: 1rem;
width: 21.5rem;
}
#cards {
display: flex;
flex-direction: column;
}
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 310px;
height: 200px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 32rem;
width: 21.5rem;
margin-bottom: 4rem;
border: 4px black solid;
margin-left: 1rem;
}
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: inherit;
}
.choice {
margin-top: 0;
margin-left: 2.75rem;
}
#media only screen and (min-width: 660px) and (max-width: 1024px) {
.bg {
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
width: 100vw;
height: 100vh;
position: fixed;
z-index: -1;
}
}
I think I have what you are looking for :
First : Delete your .bg element from your html and css(you won't need it)
Then :
replace :
body {
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
margin: 0;
background-repeat: no-repeat;
background-size: cover;
height: 95vh;
}
with :
html{
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position:center;
height: 100%;
}
body{
margin:0;
padding:0;
}
Related
I can't get my hero background image to stop zooming in when I scale the browser width. I want the image to look the same on a desktop/laptop as it does on mobile. I have tried to use object-fit but it doesn't seem to be making any difference, I have also tried setting static width and heights.
can anyone help or point me in the right direction.
Html
<body>
<header id="showcase" class="grid">
<div class="bg-image"></div>
</header>
</body>
CSS
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 1.1em;
line-height: 1.5;
text-align: center;
}
img {
display: block;
width: 100%;
height: auto;
}
h1,
h2,
h3 {
margin: 0;
padding: 1em 0;
}
p {
margin: 0;
padding: 1em 0;
}
#showcase {
min-height: 450px;
}
.bg-image {
position: relative;
background-image: url(girlsmall.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 450px;
}
/* small tablet styles */
#media screen and (min-width: 620px){
}
/* large tablets and laptops */
#media screen and (min-width: 960px){
body{
font-size: 18px;
}
}
/* desktop styles */
#media screen and (min-width: 1200px){
body{
font-size: 20px;
}
}
is that what you want ? i didn't set the picture as a background, but just used the z-index property.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
html, body
{
height: 100%;
margin: 0px;
}
#a
{
position: relative;
height: 100%;
margin-left: auto;
margin-right: auto;
z-index: -1;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
<body>
<img id="a" src="girlsmall.jpg" alt="">
</body>
</html>
I am trying to create a page with a slot machine and I have some issues when I am trying to make it responsive. At some point it gets cut off when going to smaller devices. Also I think that I made it a bit complicated , I hope you guys understand my mess of a code. thanks a lot
* {
margin: 0;
padding: 0;
border: 0 none;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.background {
background: url("bg.jpg");
height: 500px;
padding: 270px 0;
height: 100%;
background-repeat: no-repeat;
width: 100%;
}
.all-parts {
margin: auto;
height: 300px;
width: 50%;
position: relative;
}
.slot-machine {
background: url("slot-machine.png");
background-repeat: no-repeat;
height: 500px;
width: 100%;
position: absolute;
}
.free-spins {
background: url("freespins-banner.png");
background-repeat: no-repeat;
height: 100px;
position: absolute;
top: 150px;
left: 370px;
z-index: 3;
width: 60%;
}
.click-to-spin {
background: url("diagonal-strip.png");
background-repeat: no-repeat;
position: absolute;
z-index: 3;
top: 450px;
width: 100%;
height: 130px;
background-size: cover;
}
.click-to-spin p {
text-align: center;
margin-top: 70px;
font-size: 40px;
color: rgb(247, 241, 198);
}
.first-slot img {
margin-top: -1180px;
margin-left: 215px;
width: 120px;
}
.second-slot img {
margin-top: -1180px;
margin-left: -10px;
width: 120px;
}
.third-slot img {
margin-top: -1180px;
margin-left: -10px;
width: 120px;
}
first-slot,
.second-slot,
.third-slot {
float: left;
}
.slot-machine-wrapper {
overflow: hidden;
height: 150px;
margin-top: 60px;
}
#media only screen and (max-width: 1400px) {
body {
background-color: red;
}
.all-parts {
width: 100%;
display: table;
}
.slot-machine {
width: 100%;
}
}
<div class="background">
<div class="all-parts">
<div class="slot-machine">
<div class="slot-machine-wrapper">
<div class="first-slot">
<img src="slot-strip.png">
</div>
<div class="second-slot">
<img src="slot-strip.png">
</div>
<div class="third-slot">
<img src="slot-strip.png">
</div>
</div>
</div>
<div class="free-spins">
</div>
</div>
<div class="click-to-spin">
<p>Click to spin!</p>
</div>
</div>
i will suggest you use css #media queries to break points, for example
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) {
.slot-machine {
background:url("slot-machine.png");
background-repeat: no-repeat;
height:200px;
width:70%;
position: absolute;
}
}
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) {
.slot-machine {
background:url("slot-machine.png");
background-repeat: no-repeat;
height:250px;
width:80%;
position: absolute;
}
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
just place the css value that will likely change accross devices in each #media queries above, also remember to have this in your meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
I have searched the internet for quite a few hours now and cannot figure out why my site is responsive on the desktop but not on mobile (at least on my iphone X). On mobile, all of my elements except the gif at the top of the page are over to the left and half hidden outside the browser window (with no horizontal scroll bar btw). I have the viewport meta tag in there, which is the only solution I could find, but it did not do anything to my site's mobile view when I checked after adding it in. What else could the problem be? I am very much a beginner, so I am hoping this is just a dumb little mistake. Someone please help. I'm about to tear my hair out here!
You can visit the site here and resize to see how it should be, this is how it looks on mobile currently (not a full view btw, just a shot of the bottom sections of my site as you can see the problem most clearly from there):
Mobile Screenshot
here is my code:
<!doctype html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Jasmine Thorson</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<ul id="menu">
<li>WORK</li>
<li>ABOUT</li>
<li>SKILLS</li>
<li>CONTACT</li>
</ul>
<div id="top"></div>
<div id="box0">
<img src="headergif_vert.gif" alt="myhero" class="hero">
</div>
<div id="work">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
<div id="box5">
</div>
<div id="box6">
</div>
<div id="box7">
</div>
<div id="box8">
</div>
<div id="box9">
</div>
<div id="box10">
</div>
</div>
<div id="about"></div>
<img src="ABOUTGIF.gif" class="aboutgif" alt="aboutgif">
<div id="aboutme">
<h1 class="abouthead">I'm a young creative fresh out of college with lots of <mark class="pink">charisma.</mark></h1>
<p class="para">I believe that good design can help people laugh, cry, stay informed, & understand each other better. Design, simply, is visual communication.</p>
<p class="para">As a designer + photographer, it's my goal to capture the essence of my subject & express that essence in the most clear, consistent, & appropriate manner.</p>
</div>
<div id="skills"></div>
<div class="w3-container">
<table class="table1">
<tr>
<td><img src="ICONS_BRANDING.png" alt="branding" class="icon1"></td>
<td><img src="ICONS_INFOGRAPHICS.png" alt="info" class="icon1"></td>
</tr>
<tr>
<td><img src="ICONS_DIGITAL.png" alt="digital" class="icon1"></td>
<td><img src="ICONS_SOCIAL.png" alt="social" class="icon1"></td>
</tr>
</table>
<table class="table2">
<tr>
<td><img src="ICONS_BRANDING.png" alt="branding" class="icon2"></td>
<td><img src="ICONS_INFOGRAPHICS.png" alt="info" class="icon2"></td>
<td><img src="ICONS_DIGITAL.png" alt="digital" class="icon2"></td>
<td><img src="ICONS_SOCIAL.png" alt="social" class="icon2"></td>
</tr>
</table>
</div>
<div id="contact"></div>
<div id="contactbox">
<div class="col1"><h2>JASMINE THORSON</h2></div>
<div class="col5"><h2>INFO</h2></div>
<div class="col1">Graphic Designer + Photographer</div>
<div class="col2">Brooklyn, NY</div>
<div class="col3">605 + 268 + 3245</div>
<div class="col4">jnthorson#gmail.com</div>
<div class="col5">Resume</div>
</div>
<footer>
<img src="insta.png" id="insta" alt="gram" class="social">
<img src="behance.png" id="behance" alt="be" class="social">
</footer>
</body>
</html>
And here is my CSS:
#charset "UTF-8";
body {
background-color: #DBD9D6;
margin: 0;
padding: 0;
font-family: "Arial Rounded MT Bold";
color: #978B87;
}
p {
font-family: Geneva;
font-size: .75em;
line-height: 1.5em;
}
h1{
line-height: 1.25em;
}
h4{
color: #D41773;
column-span: all;
}
h5{
color: #D41773;
font-size: .65em;
}
#menu {
list-style-type: none;
margin: 20px;
padding: 0px;
width: 80px;
position: fixed;
font-family: "Arial Rounded MT Bold";
font-size: 9px;
line-height: 10px;
right: 0;
text-align: right;
z-index: 4;
}
#menu li, #menu a {
display: block;
color: black;
opacity: .35;
padding: 2px;
text-decoration: none;
}
#menu li, #menu a:hover {
background-color: transparent;
color: #D41773;
opacity: 1;
transition: color 0.3s linear;
}
#menu li, #menu a:active {
background-color: transparent;
color: #D41773;
}
#logo {
position: fixed;
display: inline-block;
margin: 20px;
width: 207px;
height: 53px;
background-image: url("logoheader.png");
z-index: 4;
}
#logo:hover {
background-image: url(logoheader.png);
background-position: 0 -54.5px;
}
img.hero {
display: block;
height: 100vh;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
#box0{
height: 100vh;
width: 100%;
background-color: #DBD9D6;
background-size: cover;
display: table;
background-attachment: fixed;
margin-left: auto;
margin-right: auto;
}
#box1{
height: 60vh;
width: 100%;
background-image: url(box1.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box2{
height: 60vh;
width: 100%;
background-image: url(box2.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box3{
height: 60vh;
width: 100%;
background-image: url(box3.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box4{
height: 60vh;
width: 100%;
background-image: url(box4.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box5{
height: 60vh;
width: 100%;
background-image: url(box5.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box6{
height: 60vh;
width: 100%;
background-image: url(box6.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box7{
height: 60vh;
width: 100%;
background-image: url(box7.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box8{
height: 60vh;
width: 100%;
background-image: url(box8.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box9{
height: 60vh;
width: 100%;
background-image: url(box9.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box10{
height: 60vh;
width: 100%;
background-image: url(box10.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#aboutme {
margin-top: 150px;
margin-bottom: 200px;
margin-left: 25%;
margin-right: 75%;
width: 300px;
}
.abouthead{
font-size: 1.5em;
}
.para{
font-size: .55em;
}
mark.pink{
color: #D41773;
background: none;
}
.aboutgif{
float: right;
width: 200px;
margin-bottom: 50px;
margin-top: 20px;
}
#media screen and (max-width: 480px) {
.aboutgif{
display: none;
}
}
#media screen and (max-width: 768px) {
#aboutme{
width: 200px;
}
}
#media screen and (max-width: 480px) {
#aboutme{
width: 250px;
}
}
#media screen and (min-width: 768px) {
#aboutme{
width: 370px;
}
}
#media screen and (max-width: 768px) {
.abouthead{
font-size: 1.5em;
}
}
#media screen and (min-width: 768px) {
.abouthead{
font-size: 2em;
}
}
#media screen and (max-width: 480px) {
.abouthead{
font-size: 1.5em;
}
}
#media screen and (max-width: 480px) {
.para{
width: 200px;
}
}
#media screen and (max-width: 768px) {
.para{
font-size: .25em;
}
}
.w3-container{
background-color: #C5BBB6;
margin-top: 100px;
padding: 10px;
}
.table1{
width: 350px;
table-layout: fixed;
border-spacing: 0px;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}
#media screen and (min-width: 768px) {
.table1{
display: none;
}
}
.table2{
width: 650px;
table-layout: fixed;
border-spacing: 0px;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}
#media screen and (max-width: 768px) {
.table2{
display: none;
}
}
td{
padding-top: 20px;
vertical-align: top;
border-spacing: 0px;
}
.icon1{
width: 85px;
padding: 5px;
}
.icon2{
width: 110px;
padding: 5px;
}
#contactbox{
float: left;
width: 85%;
margin-left: 10%;
margin-top: 40px;
margin-bottom: 40px;
column-count: 5;
column-rule-width: 0px;
font-size: .5em;
}
#contactheaders{
column-span: all;
display: inline;
}
.col1{
float: left;
width: 100%;
}
.col2{
float: left;
width: 100%;
}
.col3{
float: left;
width: 100%;
}
.col4{
float: left;
width: 100%;
}
.col5{
float: left;
width: 100%;
}
footer{
position: fixed;
display: inline;
padding: 40px;
left: 0;
bottom: 0;
margin-bottom: 0px;
width: 100%;
height: 10px;
background: none;
color: black;
z-index: 5;
}
.photo{
float: left;
margin-right: 10%;
font-size: .6em;
opacity: .25;
color: black;
}
#insta{
width: 25px;
float: right;
margin-right: 65px;
padding-left: 5px;
}
#behance{
width: 25px;
float: right;
margin-left: 10%;
}
#behance.social, #insta.social {
opacity: 0.25;
filter: alpha(opacity=50);
transition: 0.3s linear;
}
#behance.social:hover, #insta.social:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
As I said before, I am a BEGINNER. Literally a beginner. We did not really learn this stuff in school, we were allowed to use Muse instead and I was afraid of how confusing coding looked so I am learning right now and I'm sorry if my code is just disgustingly awful, but I could really use some help! I ran both codes through validators and came out with minimal errors (which I fixed).
I think one possible solution would be to center your entire page. Keep your HTML as it is, and add this CSS:
html,
body {
width: 100%;
margin: 0 auto;
}
This will tell your html and body to be centered.
I hope this helps.
html * {
box-sizing: border-box;
padding:0;
margin:0;
}
html,
body {
height: 100%;
font-family: 'Roboto', sans-serif;
color:#666666;
line-height: 1.7em;
}
body {
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
#full_2, #full_3, #full_4{
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
background: black;
opacity: 0.36;
}
#full_4 {
background: magenta;
}
#full_2 {
background: white;
}
#full_3 {
background: lightgray;
}
.arrow-down {
position: absolute;
bottom: 10px;
width: 45px;
height: 45px;
left: calc(50% - 16px);
}
.arrow-down a img {
width: 100%;
}
.logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;}
.main-nav {float: right; width: 60%; height: 100%;}
.menu {
background-color: #373737;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
z-index: 5;
}
#main-header a{
text-decoration: none;
color: #ffffff;
font-size:2.0em;
z-index: 10;
opacity: 1;
}
#main-header a:hover{
color: #585858;
}
#main-header {
position: absolute;
width:100%;
height:70px;
top:0;
background-color: rgba(0,0,0,0);
z-index: 100;
}
#main-header ul li {
display:inline;
padding:20px 20px;
}
#main-header ul {
float: right;
margin-top:0px;
padding:0;
padding-top: 25px;
padding-right: 25px;
text-align: right;
}
#container{
width: 90%;
}
#lupa{
float: right;
width: 40%;
height: 100%;
}
#lupa img{516 918
width: 90px;
height: 492px;
float: right;
padding-top: 90px;
}
#content_1{
float: left;
height: 100%;
width: 60%;
}
#content_container{
padding-top: 125px;
height: 100%;
width: 100%;
padding-left: 35%;
}
#nadpis1{
margin-bottom: 45px;
}
#nadpis1 img{
width: 231px;
height: 44px;
}
#content_1_1 a{
color: #014FC4;
text-decoration: none;
font-weight: 800;
font-size: 25px;
}
#content_1_1 h2, p{
color: #2F2F2F;
font-size: 25px;
text-decoration: none;
}
#footer_left{
height: 90%;
float: left;
width: 40%;
}
.footer_1, .footer_2{
height: 100%;
width: 50%;
}
.footer_1{
float: left;
}
.footer_2{
float:right;
}
.footer_3{
}
#full_5{
height:100vh;
background-color: #0F032D;
bottom: 0;
}
.footer_bottom{
color: white;
height: 10%;
width: 100%;
text-align: center;
clear: both;
bottom: 0;
padding-bottom: 10px;
z-index: 10;
}
#full_5 ul{
padding-right: 25px;
padding-top: 25px;
}
#full_5 ul li{
padding-top: 25px;
}
#full_5 ul li a{
color: white;
text-decoration: none;
font-size: 16px;
}
#media only screen and (min-width: 320px) and (max-width: 768px) {
html * {
box-sizing: border-box;
padding:0;
margin:0;
}
html,
body {
height: 100%;
font-family: 'Roboto', sans-serif;
color:#666666;
line-height: 1.7em;
}
body {
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
#full_2, #full_3, #full_4{
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
background: black;
opacity: 0.36;
}
#full_4 {
background: magenta;
}
#full_2 {
background: white;
}
#full_3 {
background: lightgray;
}
.arrow-down {
position: absolute;
bottom: 10px;
width: 45px;
height: 45px;
left: calc(50% - 16px);
}
.arrow-down a img {
width: 100%;
}
#full_2 .arrow-down a img {
width: 100%;
display: none;
}
.logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;}
.main-nav {float: right; width: 60%; height: 100%;}
.menu {
background-color: #373737;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
z-index: 5;
}
#main-header a{
text-decoration: none;
color: #ffffff;
font-size:2.0em;
z-index: 10;
opacity: 1;
}
#main-header a:hover{
color: #585858;
}
#main-header {
position: absolute;
width:100%;
height:70px;
top:0;
background-color: rgba(0,0,0,0);
z-index: 100;
}
#main-header ul li {
display:inline;
padding:20px 20px;
}
#main-header ul {
float: right;
margin-top:0px;
padding:0;
padding-top: 25px;
padding-right: 25px;
text-align: right;
}
#container{
width: 95%;
margin-right: auto;
margin-left: auto;
}
#lupa{
text-align: center;
width: 100%;
height: 100%;
float: none;
}
#lupa img{516 918
width: 90px;
height: 492px;
float: none;
padding-top: 0px;
}
#content_1{
height: 100%;
width: 100%;
text-align: center;
}
#content_container{
padding-top: 100px;
height: 100%;
width: 100%;
padding-left: 0px;
margin-bottom: 20px;
}
#nadpis1{
margin-bottom: 45px;
}
#nadpis1 img{
width: 231px;
height: 44px;
}
#content_1_1 a{
color: #014FC4;
text-decoration: none;
font-weight: 800;
font-size: 25px;
}
#content_1_1 h2, p{
color: #2F2F2F;
font-size: 25px;
text-decoration: none;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Add gospel Přerov</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link
href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,cyrillic-ext'
rel='stylesheet' type='text/css'>
</head>
<div class="menu" >
</div>
<div id="wrapper">
<div id="main-header">
<div class="logo">
<a href="http://david.addagio.cz/gospel"><img src=""
style="max-width: 90%; height: auto;" alt="gospel logo" /></a>
</div>
<!--/.logo-->
<div class="main-nav">
<nav class="nav">
<ul>
<li class="nav-item">Aktuálně</li>
<li class="nav-item">O nás</li>
<li class="nav-item">Kontakt
<li class="nav-item">Foto/Video
</ul>
</nav>
</div>
</div>
<div id="full_1">
<div class="arrow-down">
<img src="arrow_down.png" alt="arrow-down">
</div>
</div>
<div id="full_2">
<div id="container">
<div id="content_1">
<div id="content_container">
<div id="nadpis1">
<img src="where.png" alt="where">
</div>
<div id="content_1_1">
<p>Už z našeho jména vyplívá, že se nacházíme
ve městě Přerov. Klikněte na lupu a získáte
přesnou navigaci.
Jsme od Vás příliš daleko?
kontaktujte nás zde</p>
</div>
</div>
</div>
<div id="lupa">
<img src="lupa.png">
</div>
</div>
<div class="arrow-down">
<img src="arrow_down_black.png" alt="arrow-down">
</div>
</div>
<div id="full_3">
<div class="arrow-down">
<img src="arrow_down.png" alt="arrow-down">
</div>
</div>
<div id="full_4">
<div class="arrow-down">
<img src="arrow_down.png" alt="arrow-down">
</div>
</div>
<div id="full_5">
<div id="footer_left">
<div class="footer_1">
<ul>
<li>Podmínky použití</li>
<li>Kontakty</li>
<li>Novinky</li>
<li>Fotky</li>
</ul>
</div>
<div class="footer_2">
</div>
</div>
<div class="footer_3">
</div>
<div class="footer_bottom">
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js">
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left: "285px"
}, 200);
});
/* Then push them back */
$('.icon-close').click(function() {
$('.menu').animate({
left: "-285px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
});
};
</script>
</body>
</html>
Hi,
Well, i am making a website.. it contains 5 divs, (full_1, full_2, full_3, full_4, full_5), all those divs are height:100vh; and width:100%;
there is a
body {
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
now, everything just works great, but the last div has a little line below it, like 1px line (this line looks like there is a space at the bottom, below the div, cause the line looks like the background image mentioned before...)
This problem I have seen only in Microsoft Edge, but I only tried Edge and Chrome(Chrome displays it really great)
Here are photos from a) Edge , b) Chrome.
Hope, you can see it...
Also... the code snippet is maybe wrong... but it could help.
PS: Site is optimized for phones and tablets.
PPS: for clear look at the website, visit: http://david.addagio.cz/gospel
Just give boxshadow of 1px with same color on bottom
box-shadow: #0f032d 0px 1px 0;
I have a list of screenshots. I want to display those inside a desktop-frame. I can achieve the effect easily with CSS but trying to make it responsive is giving me headaches.
My Html structure and style:
<style>
.container {
width: 80%;
margin: 0 auto;
}
.frame {
list-style-type: none;
background-image: url('http://www.hobbysubmarines.com/TV.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
max-width: 651px;
height: 358px;
}
.frame li {
width: 100%;
}
.screenshot {
position: relative;
top: 1px;
left: 5px;
}
</style>
HTML:
<div class="container">
<ul class="frame">
<li><img class="screenshot" src="../img/screenshot1.jpg"></li>
</ul>
</div>
Fiddle: http://jsfiddle.net/faj2rfc8/1/ so you maybe get the idea. If you see the fiddle, it is just to put the cat inside the tv-frame. Making this responsive is my main issue.
I would size the background in 100%, and add a media query to reduce the height of the screenshots for smaller screens. I put a fiddle together for you:
.container {
width: 80%;
margin: 0 auto;
}
.frame {
background-image: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg');
background-size: 100%;
background-position: center;
margin: 0 auto;
max-width: 651px;
height: 358px;
}
.screenshot {
position: relative;
top: 1px;
left: 5px;
height: 100px;
}
// mobile only
#media screen and (max-width: 479px) {
.screenshot {
height: 40px;
}
}
fiddle: http://jsfiddle.net/gg89qwon/1/