I've built a simple image slider using html, css and jquery. You basically switch between images using arrows, however, the real trouble came when I tried to make it responsive. The arrows always break and display either above or under the image.
in normal browser window
when making the browser window smaller, this happens
Any idea on how to make them responsive? Thanks in advance.
$(document).ready(function() {
$('.next').on('click', function() {
var currentImg = $('.active');
var nextImg = currentImg.next();
if(nextImg.length) {
currentImg.removeClass('active').css('z-index', -10);
nextImg.addClass('active').css('z-index',10);
}
});
$('.prev').on('click', function() {
var currentImg = $('.active');
var prevImg = currentImg.prev();
if(prevImg.length) {
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index',10);
}
});
});
body {
background-image: url("../images/bg.png");
background-size: 100%;
font-size: 100%;
font-family: "Roboto",sans-serif;
color: white;
}
.container {
max-width: 1250px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #fff;
text-decoration: none;
}
.slider-inner {
max-width: 1200px;
height: 675px;
position: relative;
overflow: hidden;
float: left;
padding: 0.1875em;
border: #666 solid 1px;
}
.slider-inner img {
display: none;
width: 1200px;
height: 675Px;
}
.slider-inner img.active {
display: inline-block;
}
.prev, .next {
margin-top: 18.75em;
float: left;
cursor: pointer;
}
.prev {
position: relative;
z-index: 100;
margin-right: -2.8125em;
}
.next {
position: relative;
margin-left: -2.8125em;
z-index: 100;
}
.nadpis {
font-weight: 400;
text-align: center;
}
.podnadpis {
text-align: center;
font-weight: 100;
font-size: 3em;
margin-top: 2em;
}
.img-slider {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="nadpis">Take zaujimave veci, ktore sa daju spravit s JS a JQuery</h1>
<h2 class="podnadpis">Image Slider</h2>
<div class="slider-outer">
<img src="img-slider/arrow-left.png" alt="left arrow" class="prev">
<div class="slider-inner">
<img src="img-slider/john-jpg.jpg" class="active" alt="">
<img src="img-slider/butterflies-jpg.jpg" alt="">
<img src="img-slider/andrew-jpg.jpg" alt="">
<img src="img-slider/taylor-jpg.jpg" alt="">
</div>
<img src="img-slider/arrow-right.png" alt="next arrow" class="next">
</div>
</div>
<script src="javascript/jquery.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
You use can position:absolute and left:0 or right:0 for prev and next selector.
EDIT:
Good for you to use with this:
.slider-outer {
position:relative;
}
$(document).ready(function() {
$('.next').on('click', function() {
var currentImg = $('.active');
var nextImg = currentImg.next();
if(nextImg.length) {
currentImg.removeClass('active').css('z-index', -10);
nextImg.addClass('active').css('z-index',10);
}
});
$('.prev').on('click', function() {
var currentImg = $('.active');
var prevImg = currentImg.prev();
if(prevImg.length) {
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index',10);
}
});
});
body {
background-image: url("../images/bg.png");
background-size: 100%;
font-size: 100%;
font-family: "Roboto",sans-serif;
color: white;
}
.container {
max-width: 1250px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #fff;
text-decoration: none;
}
.slider-inner {
max-width: 1200px;
height: 675px;
position: relative;
overflow: hidden;
float: left;
padding: 0.1875em;
border: #666 solid 1px;
}
.slider-inner img {
display: none;
width: 1200px;
height: 675Px;
}
.slider-inner img.active {
display: inline-block;
}
.prev, .next {
margin-top: 18.75em;
/*float: left; remove */
cursor: pointer;
width: 60px;
}
.prev {
z-index: 100;
margin-right: -2.8125em;
position:absolute;
left:0;
}
.next {
margin-left: -2.8125em;
z-index: 100;
position:absolute;
right:0;
}
.nadpis {
font-weight: 400;
text-align: center;
}
.podnadpis {
text-align: center;
font-weight: 100;
font-size: 3em;
margin-top: 2em;
}
.img-slider {
text-align: center;
}
.slider-outer {
position:relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="nadpis">Take zaujimave veci, ktore sa daju spravit s JS a JQuery</h1>
<h2 class="podnadpis">Image Slider</h2>
<div class="slider-outer">
<img src="https://www.seekpng.com/png/detail/13-134931_white-curved-arrow-png-graphic-download-white-curved.png" alt="left arrow" class="prev">
<div class="slider-inner">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxNUlvSKCK4HnDA4_ZnFphN4O6vj2DxrHNdw&usqp=CAU" class="active" alt="">
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxNUlvSKCK4HnDA4_ZnFphN4O6vj2DxrHNdw&usqp=CAU" alt="">
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</div>
<img src="https://www.seekpng.com/png/detail/13-134931_white-curved-arrow-png-graphic-download-white-curved.png" alt="next arrow" class="next">
</div>
</div>
<script src="javascript/jquery.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,400;1,300&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<title>Xynelp</title>
</head>
<body>
<header class="HeaderTop">
<div class="header-logo">
<img
class="logobruh"
src="/User interface logos/Home-6-Logo-Parallax_small.webp"
alt=""
/>
</div>
<div class="pages-of-main-page">
Home
Products
About Us
Help
Report
</div>
<div class="user-releated-field">
<a class="registratoin" href="">Registratoin</a>
<a class="login" href="">Sign In</a>
<a href=""
><img
class="search-img"
src="/User interface logos/search_FILL0_wght400_GRAD0_opsz48.png"
alt=""
/></a>
<a href=""
><img
class="favorites-logo"
src="/User interface logos/favorite_FILL0_wght400_GRAD0_opsz48.png"
alt=""
/></a>
<img
class="Cart-img"
src="/User interface logos/shopping_cart_FILL0_wght400_GRAD0_opsz48.png"
alt=""
/>
<img
class="Menu-Button"
src="/User interface logos/menu_FILL0_wght400_GRAD0_opsz48.png"
alt=""
/>
<img
class="user-logo"
src="/User interface logos/person_FILL0_wght400_GRAD0_opsz48.png"
alt=""
/>
<img
class="shoppingBag-logo"
src="/User interface logos/shopping_bag_FILL0_wght400_GRAD0_opsz48.png"
alt=""
/>
</div>
</header>
<!--
<div class="first-big-pic"></div> -->
</body>
</html>
css:
body {
margin: 0;
padding: 0;
}
/* widht in HeaderTop is FUll size with no scrollbar width: 1916px */
.HeaderTop {
width: 1916px;
height: 100px;
}
.header-logo {
height: 60px;
width: 100px;
position: relative;
top: 22px;
left: 55px;
}
.logobruh {
width: 100px;
}
.pages-of-main-page {
height: 60px;
width: 750px;
position: relative;
margin: auto;
bottom: 42px;
right: 150px;
}
.Home-a {
font-family: "Roboto", sans-serif;
font-weight: 700px;
font-size: 20px;
text-decoration: none;
color: black;
position: relative;
top: 17px;
font-weight: bold;
padding: 30px;
}
.user-releated-field {
height: 60px;
width: 550px;
position: relative;
bottom: 106px;
left: 1350px;
}
.registratoin,
.login {
font-family: "Roboto", sans-serif;
font-weight: 700px;
font-size: 20px;
text-decoration: none;
color: gray;
position: relative;
bottom: 15px;
font-weight: bold;
padding: 10px;
height: 50px;
}
.search-img,
.favorites-logo,
.Cart-img {
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
position: relative;
top: 5px;
width: 35px;
padding: 10px;
}
.Menu-Button {
display: none;
}
.user-logo {
display: none;
}
.shoppingBag-logo {
display: none;
}
#media all and (min-width: 301px) and (max-width: 600px) {
.HeaderTop {
width: 600px;
background-color: white;
height: 60px;
}
.logobruh {
position: relative;
bottom: 10px;
left: 220px;
width: 70px;
}
.Home-a {
visibility: hidden;
}
.pages-of-main-page {
display: none;
}
.favorites-logo,
.Cart-img {
display: none;
}
.registratoin,
.login {
display: none;
}
.user-releated-field {
width: 50px;
position: relative;
left: 70px;
bottom: 65px;
}
.search-img {
width: 40px;
}
.Menu-Button {
display: block;
position: relative;
right: 55px;
bottom: 55px;
width: 50px;
}
.user-logo {
display: block;
position: relative;
left: 400px;
bottom: 105px;
}
.shoppingBag-logo {
display: block;
position: relative;
left: 475px;
bottom: 155px;
width: 43px;
}
body {
background-color: gray;
}
}
i tried everything i could possibly think of but nothing worked sometimes when i spam press "toogle device toolbar" in inspect header becomes fully responsive in inspect but whenever i minimze the window responsivness just dissapears and doesnt get samller as i minimize the window. while i spam toogle device toolbar broswer automatically changes its layout sometimes way too zoomed in sometimes just zoomed. i thought it was chromes fault and i reseted chromes settings but still nothing. and all of this happens while ii dont even touch a code its like this thing as its own mind.
I am working on a little project. Until now everything went well, but for one reason or another, when I am making my second page, it will only load a part of the CSS (everything until calendar). I tried to put it in another CSS file and link the two files to the HTML file, and that works, but I would like to have all my CSS in just one file.
Can you help me?
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="headerWrapper">
<h1>Volg ons leven op deze website!</h1>
</div>
</div>
<div class="timeline" id="timeline">
<div class="timelineWrapper">
<h3>Tijdlijn</h3>
<div class="timelinegrid">
<img src="./assets/pictures/family_pic.jpg">
<p>Zeeland - 2018</p>
<p>Welkom Tuur in de familie - 11/01/2018</p>
<img src="./assets/pictures/tuur.jpg">
<img src="./assets/pictures/verjaardag-marie-2017.jpg">
<p>Verjaardag Marie - 2017</p>
<p>Verjaardag Eline - 2016</p>
<img src="./assets/pictures/verjaardag-eline-2016.jpg">
</div>
</div>
</div>
</body>
</html>
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="calendar">
<div class="calendarWrapper">
<h3>Kalender</h3>
<div class="cal">
<!-- CalendarLink -->
</div>
</div>
</div>
style.css
#import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* Header */
.header {
background-image: url(assets/pictures/hero_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
max-width: 100%;
}
.nav {
width: 100%;
height: 100px;
}
.navWrapper {
width: 85%;
margin: auto;
}
.navWrapper img {
height: 35px;
padding-top: 32.5px;
}
.right {
padding-top: 32.5px;
float: right;
}
#homepage, #calendar, #photoalbum, #lists, #recipes {
color: #000;
font-weight: bold;
font-size: 16px;
margin-right: 35px;
letter-spacing: 0.6px;
}
.headerWrapper {
padding-top: 235px;
}
.headerWrapper h1 {
font-size: 8vw;
font-weight: bold;
color: #4A4A4A;
text-align: center;
letter-spacing: 3.33px;
}
/* Timeline */
.timeline {
width: 100%;
}
.timelineWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.timelineWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
.timelinegrid {
margin-top: 40px;
display: grid;
grid-template-columns: 500px 500px;
grid-auto-rows: auto auto;
grid-gap: 2%;
align-items: end;
justify-content: center;
}
.timelinegrid img {
width: 100%;
}
.timelinegrid p {
font-size: 30px;
color: #4A4A4A;
}
/* Calendar */
.calendar {
width: 100%;
}
.calendarWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.calendarWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
Your css has an error. In .timelinegrid(line 98), you have align-items set to end.
If you fix this, the css should fully load.
https://www.w3schools.com/cssref/css3_pr_align-items.asp
Im working on a code and I would like to make the space between "Szafranowka" and "Apartaments & Restaurant" smaller. Here's how it looks like now: https://gyazo.com/d6843d8857e954acbae5c1da748c044b
I really cannot find the answer that would perfectly fit my expectations. Please, could any1 help me? :)
Also, I would like to make a small square around "Wejscie/Entrance", but when im trying to do it with the border, it looks like this: https://gyazo.com/f84fedc7a78854773b287e01ebd3a21f
Here's a part of code that im using to make a border:
<h5 style="border:3px; border-style:solid; border-color:#000000; padding: 1em;">Wejscie/Entrance</h5>
and here's my code:
HTML:
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance">Wejscie/Entrance</h5>
</div>
</div>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
to your #entrance, try this :
#entrance {
width: 8rem; //or another size
margin auto; // to center
border: 2px solid;
}
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <span id="entrance">Wejscie/Entrance</span>
</div>
CSS:
h2{
margin:5px;
line-height:15px
}
#entrance{
border:1px solid;
}
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
#header h2
{
margin-bottom: -30px;
}
#entrance span
{
border: 1px solid;
padding: 15px;
}
</style>
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance"><span>Wejscie/Entrance</span></h5>
</div>
</div>
</body>
</html>
So I have looked into code for my website that would changes the css and even the html of certain sections of my code when the screen size changes. What I am looking into as a start is when I put my website into split screen on Windows 10, or on a Mac, I want the header "Some Title" to move to the left side of the header section. I hope that this will help me with changing certain aspects of my website when the screen size changes. My code is below.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel = "stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Some Title</h1></a>
<style>
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
My CSS
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.headerLogo {
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
Media queries can help you to define different styles for different screen sizes. Also, I'd recommend a different accomodation of HTML items, e.g.:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body {
margin: 0;
}
.Header {
background-color: black;
text-align: right;
}
.socialmedia {
transform: translate(0, -50%);
align-items: center;
}
.socialmedia a{
display:inline;
}
h1 {
color:white;
font-family: Verdana;
font-style: italic;
font-size: x-large;
text-align: center; padding-top: 20px;
}
#media (max-width:700px){
.headerLogo h1 {
text-align:left;
}
}
#media (min-width:1000px){
.socialmedia {
margin-right:100px;
}
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class="headerLogo" href="file:///C:/Noah's%20stuff/Home.html" ><h1>Some Title</h1></a>
<div class="socialmedia">
<a class="Facebook" href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
<a class="Instagram" href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
<a class="Youtube" href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
<button style = "background-color: white;">Pre-Order</button>
</div>
</div>
</body>
</html>
When screen size < 700px then text will align to the left, and when screen size is >= 1000 then social media box will add a margin to the right.
Well we can do this in two ways:-
1) Using media queries. please refer here
2) You can also achieve this using simple JavaScript. See Below:-
$(window).on('resize', function() {
if($(window).width() > 600) {
$('#body').addClass('limit1200');
$('#body').removeClass('limit400');
}
else {
$('#body').addClass('limit400');
$('#body').removeClass('limit1200');
}
})
.limit400 h1 { font-size:12px; }
.limit1200 h1 { font-size:50px; }
<div id="body" class="limit400">
<h1>Hello :Professor</h1>
<span>[ change the screen width to understant the effect ]</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have also created a demo on codepen. See This
Thanks for bearing with me.
Example
#media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
.seged{position: relative;}
#lab{border-right: 0px;}
}
As mentioned in the comments, you want media queries:
#media (max-width: 800px) {
h1 {
text-align: left !important;
}
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel = "stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:blue; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Some Title</h1></a>
<style>
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
My CSS
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.headerLogo {
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
i build a little landing page with some scrolling and some first information.
It works on Chrome/Firefox/Safari but not on IE/Edge. IE/Edge doesn't load any Style. It is like there isn't any CSS.
My CSS is valid and I read about some Problems with IE but I don't find a solution. What points I should check to get a working solution for IE/Edge?
Here is the HTML Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" initial-scale="1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>TITLE</title>
<link rel="stylesheet" href="styles/large.css" type="css/text" media="screen and (min-width: 1200px)" />
<link rel="stylesheet" href="styles/middle.css" type="css/text" media="screen and (min-width: 1000px)" />
<link rel="stylesheet" href="styles/small.css" type="css/text" media="screen and (min-width: 860px)" />
<link rel="stylesheet" href="styles/mobil.css" type="css/text" media="screen and (max-width: 860px)" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 0) {
$('#scroll-arrow').animate(
{opacity : 0}, 1000);
}
else {
$('#scroll-arrow').animate(
{opacity : 1}, 100);
}
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var screenheight = $(window).height();
var secondsiteheight = $("#second-site").height();
var headerheight = $("#headertext").height();
var margin = (screenheight - secondsiteheight) / 2;
$("#first-site").height(screenheight);
$("#second-site").css("margin-top", margin);
$("#second-site").css("margin-bottom", margin);
var arrowheight = $("#scroll-arrow>img").height();
var top = screenheight - arrowheight - headerheight/2;
$("#scroll-arrow>img").css("top", top);
});
</script>
</head>
<body>
<div id="headertext">
HEADERTEXT
</div>
<div id="first-site">
<img src="img/background.png">
<div id="scroll-arrow">
<img src="img/Pfeil.png">
</div>
</div>
<div id="second-site">
<p>Some Text </p>
<p id="logoname">NAME</p>
<br>
<p>SOME MORE TEXT</p>
<a href=www.facebook.de/NAME>
<img id="fb" src="img/facebook.png">
</a>
<br><br>
<p>Some more Text</p>
<p>Some more Text</p>
</div>
</body>
</html>
And here is also the CSS (large.css for example)
#import url(https://fonts.googleapis.com/css?family=Cinzel);
*{
padding: 0;
margin: 0;
}
body{
margin: 0px auto;
padding: 0px;
background: url('../img/background.png') no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: auto 100%;
background-color: black;
overflow-x: hidden;
}
a{
text-decoration: none;
}
#headertext{
color: white;
text-align: center;
font-size: 25px;
margin-top: 15px;
font-family: 'Cinzel', serif;
width: 100%;
margin-left: auto;
margin-right: auto;
position: fixed;
margin-bottom: -15px;
}
#first-site img{
height: 90vh;
z-index: 1;
background-color: rgba(0,0,0,0);
visibility: hidden;
}
#scroll-arrow{
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
width: 100%;
}
#scroll-arrow img{
position: absolute;
visibility: visible;
height: 6vh;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
#second-site{
background-color: rgba(0,0,0,0.7);
width: 100%;
margin-top: 10vh;
margin-bottom: 35vh;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
float: left;
text-align: center;
max-height: 100vh;
}
#second-site p{
color: white;
font-size: 25px;
}
#fb{
height: 30px;
margin-top: 5px;
}
#fb:hover{
height: 38px;
margin-bottom: -8px;
}
#logoname{
color: white;
text-align: center;
font-size: 25px;
font-family: 'Cinzel', serif;
}