I took a course in Codeacademy.com for interactive website and finished it, the website we built was not responsive so i took on myself to take it and try to make it a responsive one.
I am having a problem right now with the images on the slider,they just go out of the div,how can i make them stay there?
links:
HTML
CSS
/* General */
.container {
width: 70%;
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 17px;
padding: 1% 2% 1% 1%;
}
/* Menu */
.header .menu {
float: right;
list-style: none;
margin: 1% 0 1% 0;
}
.menu > li {
display: inline;
padding: 0 3% 0 1.5%;
}
.menu a {
color: #898989;
}
/* Dropdown */
.dropdown-menu {
font-size: 16px;
margin-top: 1%;
min-width: 95px;
}
.dropdown-menu li a {
color: #898989;
padding: 8%;
font-weight: 300;
}
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 20%;
margin-bottom: 0;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 2%;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 5%;
margin-top: 2%;
}
.slide-img {
text-align: right;
max-width: 100%;
display: block;
height: auto;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 2%;
margin-bottom: 5%;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 1.5%;
}
.arrow-prev {
margin-right: 2.8%;
display: inline-block;
vertical-align: top;
margin-top: 0.7%;
}
.arrow-next {
margin-left: 2.5%;
display: inline-block;
vertical-align: top;
margin-top: 0.7%;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 1%;
}
.slider-dots li.active-dot {
color: #363636;
}
/* App links */
.get-app {
list-style: none;
padding-bottom: 1%;
padding-left: 1%;
padding-top: 1%;
}
.get-app li {
float: left;
margin-bottom: 1%;
margin-right: 1%;
margin-left: 1%;
}
.get-app img {
height: 40px;
}
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
</a>
<ul class="menu">
<li>Get the App</li>
<li>Tutorials</li>
<li>Magazines</li>
<li>Web Tools</li>
<li>Support</li>
<li>Careers</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Community</li>
<li>Our Blog</li>
<li>Maps Blog</li>
<li>Eng Blog</li>
<li>Advertisers</li>
<li>Publishers</li>
<li>About Us</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Flipboard Is Your Personal Magazine</h1>
<p>It's a single place to discover, collect and share the news you care about. Add your favorite social networks, publications and blogs to stay connected to the topics and people closest to you.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/cnn.png">
Read Now
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Enjoy Flipboard Magazines</h1>
<h2>on the Web</h2>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines on any topic imaginable. Now magazines created by our readers, from Dali to End Trafficking, can be shared and enjoyed on the Web by anyone, anywhere.</p>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/magazines.png">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Badges & Widgets</h1>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/bw.png">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</div>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
Thanks a lot
Since you are using bootstrap, you can use class img-responsive in the image tag to make your images responsive.
<div class="slide-img col-xs-7">
<img class="img-responsive" src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png">
</div>
your HTML will be like this:
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
</a>
<ul class="menu">
<li>Get the App</li>
<li>Tutorials</li>
<li>Magazines</li>
<li>Web Tools</li>
<li>Support</li>
<li>Careers</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Community</li>
<li>Our Blog</li>
<li>Maps Blog</li>
<li>Eng Blog</li>
<li>Advertisers</li>
<li>Publishers</li>
<li>About Us</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Flipboard Is Your Personal Magazine</h1>
<p>It's a single place to discover, collect and share the news you care about. Add your favorite social networks, publications and blogs to stay connected to the topics and people closest to you.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img class="img-responsive" src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/cnn.png">
Read Now
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Enjoy Flipboard Magazines</h1>
<h2>on the Web</h2>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines on any topic imaginable. Now magazines created by our readers, from Dali to End Trafficking, can be shared and enjoyed on the Web by anyone, anywhere.</p>
</div>
<div class="slide-img col-xs-7">
<img class="img-responsive" src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/magazines.png">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Badges & Widgets</h1>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img class="img-responsive" src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/bw.png">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</div>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
for making any image auto responsive do
img {
max-width: 100%;
display: block;
height: auto;
}
Now image will be display according to its parent width.
thanks
As your using bootstrap, you can use the class ".img-responsive", e.g :
<img class="img-responsive" src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
Related
Im having issues with aligning my 6 images in 2 rows of 3. - 1, 2, 3
4, 5, 6
At the moment they are in 3 rows. The first 2 images are in the centre of the page, while the others are all on the 3rd line. Not sure if its an issue with the div tags or the css. Im using flexbox at the moment but I know theres also grid layout
Please can you advise? Thanks very much
* {
margin: 0
}
a:link {
text-decoration: none;
color: black;
}
nav {
background-color: pink;
text-align: right;
width: 100%;
height: 160%;
height: 300px;
}
li {
list-style: none;
display: inline-block;
padding: 90px;
font-family: cursive;
text-decoration: none;
position: relative;
color: white;
}
li a {
text-decoration: none;
color: white;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly
}
.rounded {
border-radius: 20%;
}
button {
border-radius: 20%;
margin: 10px;
width: 90px;
height: 50px;
border-style: none;
background-color: white;
}
<!DOCTYPE html>
<html>
<body>
<head>
</head>
<header>
<nav>
<button><a href="/Volumes/Untitled/coding/Cart.html" class="rounded">Go to
Cart</a></button>
<button>Shop</button>
<ul>
<img src="images/Logo2.jpeg" alt="my logo" class="rounded" width="160px" />
<li>HOME</li>
<li>SHOP</li>
<li>BLOG</li>
<li>ABOUT</li>
<li>CONTACT US</li>
</ul>
</nav>
</header>
<h3>
Welcome to Luminous Butter. We dont sell Butter we do sell vintage, Customised and pre-loved Fashion Original Artwork Plus, we have a great blog which has original stories and writing to keep you entertained
</h3>
<div class="container">
<div class="image">
<img src="images/Fred.jpeg" alt="accessories" class="rounded" width="280px">
</div>
<div class="container">
<div class="image">
<img src="images/BlackonBlack.jpg" alt="photography" class="rounded" width="500px">
</div>
<div class="container">
<div class="image">
<img src="images/Boy.jpeg" alt="fashion" class="rounded" width="300px">
</div>
<div class="container">
<div class="image">
<img src="images/Campbell.jpeg" alt="footwear" class="rounded" width="400px">
</div>
<div class="container">
<div class="image">
<img src="images/Scandal.jpeg" alt="jewellery" class="rounded" width="300px">
</div>
<div class="container">
<div class="image">
<img src="images/bowie-big.jpeg" alt="art" class="rounded" width="300px">
</div>
</div>
You forgot to close your a inside your button. Also, as mentioned in the comments you cannot have an img as a direct child to a ul that is not nested in a li. So I nested it in a li and removed the default padding-inline-start to keep the same structure. Then I went down to your rows and simplified it so it is two rows of 3 as requested. Please see how I simplified the rows below:
* {
margin: 0
}
a:link {
text-decoration: none;
color: black;
}
nav {
background-color: pink;
text-align: right;
width: 100%;
height: 160%;
height: 300px;
}
li {
list-style: none;
display: inline-block;
padding: 90px;
font-family: cursive;
text-decoration: none;
position: relative;
color: white;
}
li a {
text-decoration: none;
color: white;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly
}
.rounded {
border-radius: 20%;
}
button {
border-radius: 20%;
margin: 10px;
width: 90px;
height: 50px;
border-style: none;
background-color: white;
}
<header>
<nav>
<button>Go to Cart</button>
<button>Shop</button>
<ul>
<li style="padding: 0;">
<img src="logo.png" alt="my logo" class="rounded" width="160px">
</li>
<li>HOME</li>
<li>SHOP</li>
<li>BLOG</li>
<li>ABOUT</li>
<li>CONTACT US</li>
</ul>
</nav>
</header>
<h3>
Welcome to Luminous Butter. We dont sell Butter we do sell vintage, Customised and pre-loved Fashion Original Artwork Plus, we have a great blog which has original stories and writing to keep you entertained
</h3>
<div class="container">
<img src="https://dummyimage.com/100/000/fff" alt="accessories" class="rounded" width="280px">
<img src="https://dummyimage.com/100/000/fff" alt="photography" class="rounded" width="500px">
<img src="https://dummyimage.com/100/000/fff" alt="fashion" class="rounded" width="300px">
</div>
<div class="container">
<img src="https://dummyimage.com/100/000/fff" alt="footwear" class="rounded" width="300px">
<img src="https://dummyimage.com/100/000/fff" alt="jewellery" class="rounded" width="300px">
<img src="https://dummyimage.com/100/000/fff" alt="art" class="rounded" width="300px">
</div>
there is a huge gap between my sections and I have no clue why i have tried adding padding in the form of #me { padding-bottom: 150px; } but i tried with different numbers and i see a difference when making the gap longer but when i try going negitive, it cant really seem to have an affect on whats actually going on.
here is my code for HTML
.container {
width: 100%;
height: 100%;
background: #12182b;}
.me-section {
text-align: left;
padding-left: 850px;
height: 100vh;
margin-top: 320px;}
.me-section h1 {
color: #6dffe7;
font-size: 20px;
margin: 0px;}
.about-section {
text-align: left;
padding-left: 850px;
height: 100vh;
margin-top: 320px;}
.about-section h1 {
color: #6dffe7;
font-size: 20px;
padding-top: 150px;}
<div class="container">
<img src="logo.png" class="logo">
<div class="header">
<nav class="navbar">
<ul>
<div class="download-btn">
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Resume</li>
</div>
</ul>
</nav>
<section id="me">
<div class="me-section">
<h1 class="my-name-after">Hi, my name is</h1>
<h2 class="header-name">Alberto Aday.</h2>
<h2 class="header-rest">I build on the web.</h2>
<p>I'm an aspiring software engineer. I like to build<br>websites. Back-end development is currently <br>progress.</p>
</div>
</section>
<section id="about">
<div class="about-section">
<h1>About me.</h1>
</div>
</section>
<section id="work">
<div class="work-section">
<h1>Work</h1>
</div>
</section>
<section id="contact">
<div class="contact-section">
<h1>Contact</h1>
</div>
</section>
</div>
I went ahead and removed the massive margins, which yes, did change the position of where things were but also created a ton of whitespace.
.container {
width: 100%;
height: 100%;
background: #12182b;}
.me-section {
text-align: left;
padding-left: 850px; }
.me-section h1 {
color: #6dffe7;
font-size: 20px;
margin: 0px;}
.about-section {
text-align: left; }
.about-section h1 {
color: #6dffe7;
font-size: 20px;}
<div class="container">
<img src="logo.png" class="logo">
<div class="header">
<nav class="navbar">
<ul>
<div class="download-btn">
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Resume</li>
</div>
</ul>
</nav>
<section id="me">
<div class="me-section">
<h1 class="my-name-after">Hi, my name is</h1>
<h2 class="header-name">Alberto Aday.</h2>
<h2 class="header-rest">I build on the web.</h2>
<p>I'm an aspiring software engineer. I like to build<br>websites. Back-end development is currently <br>progress.</p>
</div>
</section>
<section id="about">
<div class="about-section">
<h1>About me.</h1>
</div>
</section>
<section id="work">
<div class="work-section">
<h1>Work</h1>
</div>
</section>
<section id="contact">
<div class="contact-section">
<h1>Contact</h1>
</div>
</section>
</div>
The issue is your height:
.me-section {
text-align: left;
padding-left: 850px;
height: 100vh; /* <-------------- */
margin-top: 320px;
}
Changing it to 50 or 60 it looked a lot better!
I have a Html page in which Navigation bar and footer adjust itself according to the screen width but my main content isn't adjusting itself.
I have apllied media query but it's for resolution of mobile(517 px) but when I tested it on a pc in another with less screen width it was overflowing
All the area within class"bhavya" is overflowing out of screen.
/* Making of Box 1 on Left for posts */
.box1 {
background-color: white;
width: 746px;
height: auto;
border: 1px solid lightgray;
border-radius: 2px;
margin-top: 50px;
margin-left: 50px;
display: block;
}
/* Button to show more */
#myBtn {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
cursor: pointer;
}
.show {
display: none;
}
/* Styling Box For Search Box */
.search {
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
width: 384px;
height: 130px;
float: right;
margin-top: 50px;
margin-left: 828px;
display: block;
position: absolute;
}
/* Search Written*/
.search h3 {
margin-bottom: -40px;
text-align: center;
}
/* Style the search box */
.search input[type=text] {
padding: 13px;
border: 1px solid lightgray;
margin-top: 70px;
margin-left: 50px;
font-size: 17px;
height: 15px;
}
/* Style the button */
.search button[type=button] {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
}
/* Recent Post Column */
.recent {
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
width: 384px;
height: 850px;
float: right;
margin-top: 220px;
margin-left: 828px;
display: block;
text-align: center;
position: absolute;
}
/* img in recent */
#post1 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text1 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 2nd post */
#post2 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text2 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 3nd post */
#post3 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text3 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* Post Section fitting */
.container {
width: 746px;
}
.container .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
/* Seperate Post*/
.container .row .col {
margin: 20px;
display: none;
}
/*post Image*/
.container .row .col .imgBox {
width: 100%;
height: 220px;
}
.container .row .col .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
/*show more*/
.btn {
padding: .7rem 2rem;
background: royalblue;
border: none;
color: #FFF;
margin: 20px auto;
display: block;
font-size: 1.3rem;
cursor: pointer;
outline: none;
transition: .3s;
}
.btn:hover {
opacity: .8;
}
#media screen and (max-width: 600px) {
.search {
margin-top: 30px;
border: px;
margin-left: 50px;
}
.box1 {
width: 384px;
margin-top: 190px;
height: fit-content;
}
.recent {
display: none;
}
.container {
width: 384px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta content="Free HD Movie And Compressed Games Download From a High Speed Server, Try Now , One Click
Direct Download Link Available">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<title>GameMovieMania</title>
</head>
<body>
<h1 class="heading"><b><i>GameMovieMania</i></b></h1> <br>
<div class="topnav" id="myTopnav">
Home
Games
Movies
Contact
About
<a href="javascript:java script/code.js;" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="bhavya">
<div class="search">
<h3>Search</h3>
<input type="text" id="myInput" placeholder="Search.." onkeyup="searchOn()">
<button type="button"> Search </button>
</div>
<div class="recent">
<h3>Recent Post</h3>
<div class="post1">
<a href="gta5.html">
<img src="images/gta5.jpeg" id="img1">
<p class="text1">Grand Theft Auto 5 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post2">
<a href="gta4.html">
<img src="images/gta4.jpeg" id="img2">
<p class="text2">Grand Theft Auto 4 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post3">
<a href="gta3.html">
<img src="images/gta3.jpeg" id="img3">
<p class="text3">Grand Theft Auto 3 | Free <br>Download | Highly Compressed </p>
</a>
</div>
</div>
<span class="box1">
<div class="container">
<ul class="row">
<li class="col">
<div class="imgBox">
<img src="images/gta5.jpeg" alt="">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 5 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/nowayhome.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Spiderman No Way Home | Full Movie Download Hindi |
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta4.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 4 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/shershaah.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Shershaah Full movie download HD
</h2>
</div>
</li>
<li class="col">
<a href="sooryavanshi.html">
<div class="imgBox">
<img src="images/sooryavanshi.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Sooryavanshi Full Movie Download HD
</h2>
</div>
</a>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta3.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 3 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
</ul>
<button class="btn">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".col").slice(0, 4).show()
$(".btn").on("click", function(){
$(".col:hidden").slice(0, 4).slideDown()
if ($(".col:hidden").length == 0) {
$(".btn").fadeOut('slow')
}
})
function searchOn() {
let input = document.getElementById('myInput').value
input=input.toLowerCase();
let x = document.getElementsByClassName('col');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
</script>
</span>
</div>
<div class="footer-basic">
<footer>
<div class="social">
<a href="#">
<i class="icon ion-social-instagram"></i>
</a>
<a href="#">
<i class="icon ion-social-snapchat"></i>
</a>
<a href="#">
<i class="icon ion-social-twitter"></i>
</a>
<a href="#">
<i class="icon ion-social-facebook"></i>
</a>
</div>
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">About</li>
<li class="list-inline-item">Contact</li>
<li class="list-inline-item">Privacy Policies</li>
<li class="list-inline-item">Terms And Conditions</li>
</ul>
<p class="copyright">GameMovieMania Corp. © 2022</p>
</footer>
</div>
</body>
</html>
i hope this can some help
i added display:grid to your code and modified some of them
body{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 20vh 20vh auto 20vh;
grid-template-areas:
"h h h"
"b b s"
"b b r"
"f f f";
}
.header{
grid-area: h;
}
.box1{
grid-area: b;
background-color: white;
/* width: 746px; */
height: auto;
border: 1px solid lightgray;
border-radius: 2px;
margin-top: 50px;
margin-left: 50px;
display: block;
}
/* Button to show more */
#myBtn{
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
cursor: pointer;
}
.show{
display: none;
}
/* Styling Box For Search Box */
.search{
grid-area: s;
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
/* width: 384px; */
height: 170px;
/* float: right; */
margin-top: 50px;
/* margin-left: 828px; */
display: block;
/* position: absolute; */
}
/* Search Written*/
.search h3{
margin-bottom: -40px;
text-align: center;
}
/* Style the search box */
.search input[type=text] {
padding: 13px;
border: 1px solid lightgray;
margin-top: 70px;
margin-left: 50px;
font-size: 17px;
height: 15px;
}
/* Style the button */
.search button[type=button] {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
}
/* Recent Post Column */
.recent{
grid-area: r;
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
/* width: 384px; */
height: 100%;
/* float: right; */
margin-top: 220px;
/* margin-left: 828px; */
display: block;
text-align: center;
/* position: absolute; */
}
/* img in recent */
#post1 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text1 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 2nd post */
#post2 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text2 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 3nd post */
#post3 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text3 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* Post Section fitting */
.container {
/* width: 746px; */
}
.container .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
/* Seperate Post*/
.container .row .col {
margin: 20px;
display: none;
}
/*post Image*/
.container .row .col .imgBox {
width: 100%;
height: 220px;
}
.container .row .col .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
/*show more*/
.btn {
padding: .7rem 2rem;
background: royalblue;
border: none;
color: #FFF;
margin: 20px auto;
display: block;
font-size: 1.3rem;
cursor: pointer;
outline: none;
transition: .3s;
}
.btn:hover {
opacity: .8;
}
.footer-basic{
grid-area: f;
}
#media screen and (max-width: 600px) {
.search{
margin-top: 30px;
border: px;
margin-left: 50px;
}
.box1{
width: 384px;
margin-top: 190px;
height: fit-content;
}
.recent{
display: none;
}
.container {
width: 384px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta content="Free HD Movie And Compressed Games Download From a High Speed Server, Try Now , One Click
Direct Download Link Available">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<title>GameMovieMania</title>
</head>
<body>
<header class="header">
<h1 class="heading"><b><i>GameMovieMania</i></b>
</h1> <br>
<div class="topnav" id="myTopnav">
Home
Games
Movies
Contact
About
<a href="javascript:java script/code.js;" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="search">
<h3>Search</h3>
<input type="text" id="myInput" placeholder="Search.." onkeyup="searchOn()">
<button type="button"> Search </button>
</div>
<div class="recent">
<h3>Recent Post</h3>
<div class="post1">
<a href="gta5.html">
<img src="images/gta5.jpeg" id="img1">
<p class="text1">Grand Theft Auto 5 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post2">
<a href="gta4.html">
<img src="images/gta4.jpeg" id="img2">
<p class="text2">Grand Theft Auto 4 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post3">
<a href="gta3.html">
<img src="images/gta3.jpeg" id="img3">
<p class="text3">Grand Theft Auto 3 | Free <br>Download | Highly Compressed </p>
</a>
</div>
</div>
<div class="box1">
<div class="container">
<ul class="row">
<li class="col">
<div class="imgBox">
<img src="images/gta5.jpeg" alt="">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 5 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/nowayhome.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Spiderman No Way Home | Full Movie Download Hindi |
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta4.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 4 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/shershaah.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Shershaah Full movie download HD
</h2>
</div>
</li>
<li class="col">
<a href="sooryavanshi.html">
<div class="imgBox">
<img src="images/sooryavanshi.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Sooryavanshi Full Movie Download HD
</h2>
</div>
</a>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta3.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 3 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
</ul>
<button class="btn">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".col").slice(0, 4).show()
$(".btn").on("click", function() {
$(".col:hidden").slice(0, 4).slideDown()
if ($(".col:hidden").length == 0) {
$(".btn").fadeOut('slow')
}
})
function searchOn() {
let input = document.getElementById('myInput').value
input = input.toLowerCase();
let x = document.getElementsByClassName('col');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display = "none";
} else {
x[i].style.display = "list-item";
}
}
}
</script>
</div>
<div class="footer-basic">
<footer>
<div class="social">
<a href="#">
<i class="icon ion-social-instagram"></i>
</p>
<a href="#">
<i class="icon ion-social-snapchat"></i>
</a>
<a href="#">
<i class="icon ion-social-twitter"></i>
</a>
<a href="#">
<i class="icon ion-social-facebook"></i>
</a>
</div>
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">About</li>
<li class="list-inline-item">Contact</li>
<li class="list-inline-item">Privacy Policies</li>
<li class="list-inline-item">Terms And Conditions</li>
</ul>
<p class="copyright">GameMovieMania Corp. © 2022</p>
</footer>
</div>
</body>
</html>
You can use the CSS overflow property.
.bhavya {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
I want my navigation links to be centered in my fixed navigation bar i tried to
adding padding but somehow the navigation expands. Also i tried to vertical-align but that didn't do much. I am really new to CSS so explanations would be helpful in cases if this happened again
HTML
`<html>
<html>
<head>
<title>Photography | Home </title>
<link href="app.css" rel="stylesheet"/>
<script type="application/javascript" src="on.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showcase">
<div class="container">
<h2>Photography</h2>
<p>Our photo's are always presente in the best
quality possible with carefulness
</p>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">asdasdsada
<img src="./images/CameraIcon.png">
<h2>Photography</h2>
<p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
</div>
<div class="box">
<img src="./images/CommunityICON.jpg">
<h2>Guranteed!</h2>
<p>If you are not satisfied with our work you will have an 80% refund</p>
</div>
<div class="box">
<img src="./images/TimeIcon.png">
<h2>Time Managment</h2>
<p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>
</div>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>`
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
padding-top: 30px;
}
header a {
text-decoration: none;
text-transform: uppercase;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float:right;
text-align: center;
padding-right: 20px;
}
nav {
text-align: center;
}
I would use display: flex. It makes this really easy. Use align-items: center; to center vertically and justify-content: space-between to separate the logo from the nav. Then I would also float your nav li's left, so they're in order. You could use flex there, too, but isn't necessary.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
}
header a {
text-decoration: none;
text-transform: uppercase;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
text-align: center;
padding-right: 20px;
}
nav {
text-align: center;
}
<html>
<head>
<title>Photography | Home </title>
<link href="app.css" rel="stylesheet" />
<script type="application/javascript" src="on.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showcase">
<div class="container">
<h2>Photography</h2>
<p>Our photo's are always presente in the best quality possible with carefulness
</p>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">asdasdsada
<img src="./images/CameraIcon.png">
<h2>Photography</h2>
<p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
</div>
<div class="box">
<img src="./images/CommunityICON.jpg">
<h2>Guranteed!</h2>
<p>If you are not satisfied with our work you will have an 80% refund</p>
</div>
<div class="box">
<img src="./images/TimeIcon.png">
<h2>Time Managment</h2>
<p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>
</div>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
I wanted to create a centered social bar, here the code:
HTML&CSS:
.social-detail {
color:#fff;
font-family: ProximaNovabold;
}
.icon-social {
height: 50px;
width: 208px;
background: url(../../images/contact.png) center center no-repeat;
float: left;
}
#social {
padding: 0px 0px 2px 0px;
float: center;
}
#social li {
height: 42px;
padding: 2px 0px;
float: left;
}
#social .social-icon {
float: left;
cursor: pointer;
}
.social-info {
font-size: 14px;
color: #fff;
line-height: 36px;
padding-left: 50px;
padding-right: 10px;
width: 198px;
text-align: left;
font-family: ProximaNovabold;
}
<div class="social">
<ul id="social">
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/phone.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">+123 456 789</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/bbm.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">1A2B3C4D</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/yahoo.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">rakensu</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/skypee.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">rakensu</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/facebook.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">rakensu</div>
</div>
</li>
</ul>
</div>
and here the result:
I think you can solve giving a fixed width, padding: 0 and margin: 0 auto
ul#social {
width: 1000px;
padding: 0;
margin: 0 auto
}
you can change the width to fit the icons...
delete the float: center property, it doesn't exist...
Wrap your icons in a div thats is not affected by your background image:
<div class="social">
<div id="centeringdiv">
<ul id="social">
</ul>
</div>
</div>
and set that new div to "center"
#centeringdiv {
margin: 0 auto;
}