I made a responsive website with bootstrap 3. It's a portfolio website with an image gallery. The website does work responsive but when I view it as from a mobile or other device it doesn't scale perfectly. When I reload the page it looks right at first but when it is finished loading it changes. Does anyone have an idea where I went wrong?
body {
padding: 0;
border: 0;
vertical-align: baseline
}
.main {
margin-top: 170px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
}
.navbar {
min-height: 130px;
margin-bottom: 20px;
}
.navbar-toggle {
margin-top: 25px;
}
#media (min-width: 768px) {
.navbar-nav.navbar-right:last-child {
margin-right: 0;
}
}
.box {
padding: 5px;
margin: 0;
}
.img {
display: block;
position: relative;
margin: 0px;
z-index: 1;
}
.imgoverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.img:hover .imgoverlay {
opacity: 0.75;
}
.text {
position: absolute;
bottom: 0;
padding-bottom: 6px;
margin: auto auto auto 10px;
}
/*///////////POP UP////////*/
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 150px auto;
position: relative;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<section class="main">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 box">
<a href="#" class="img">
<img src="" alt="" class="img-responsive">
<div class="imgoverlay">
<div class="text"></div>
</div>
</a>
</div>
<!--///////////// POP UP /////////////////////-->
<div id="popup1" class="overlay">
<div class="col-md-12 popup">
<div class="col-md-6 col-md-offset-1 iframe">
<iframe src="" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-md-4 content">
<h2></h2>
<p class="info"></p>
</div>
<a class="col-md-1 close" href="#">×</a>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
use media queries
#media (min-width: 576px) { ... }
inside the braces define styles
media queries are used to define the rule that is used to define different style for different media types/devices.
if the width of the device's screen is minimum 567px then it will be rendered to defined style.
Related
I am trying to recreate a cool look I saw on a graphic design mockup but I am unsure how to do it. There is a background video, with a transparent green overlay over it, then there is an image of a man that stays fixed to the right with text overflowing over it. For the most part I was able to recreate it but it still does not look right and the image does not stay fixed to the right side. Any suggestions or a different method would be appreciated.
Here is the mockup of the webpage I am trying to recreate in CSS:
Here is what I have managed to recreate using bootstrap:
*::before, *, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.jumbotron {
position: relative;
overflow: hidden;
background-color: black;
height: 70vh;
margin-bottom: 0;
}
.jumbotron video {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
height: 100%;
/* object-fit is not supported on IE */
object-fit: cover;
opacity: 0.5;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(126, 154, 111, 0.5);
}
.jumbotron .container-fluid {
z-index: 3;
position: relative;
padding-right: 0 !important;
}
.image-holder {
width: 30%;
height: 100%;
}
.image-holder img {
width: 30%;
position: absolute;
top: -100px;
right: 0;
}
#heyGoodMeeting {
width: 80%;
z-index: 4;
}
.showcase__description {
color: white;
font-size: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Testing</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="overlay"></div>
<video autoplay muted loop>
<source src="https://geniecast.com/wp-content/uploads/2020/10/Zuen-Office-Background-Video.mp4" data-src="" type="video/mp4">
</video>
<div class="container-fluid text-white d-flex justify-content-end">
<div style="width: 80%">
<img id="heyGoodMeeting" src="https://geniecast.com/wp-content/uploads/2020/10/Good-Meeting-Logo.png" alt="hey good meeting">
<div class="showcase__description">The personalized comedy event that will transform your next client gathering, holiday party, or company meeting from a typical zoom call into a customized, memorable, and hilarious experience.</div>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
<div class="image-holder">
<img src="https://geniecast.com/wp-content/uploads/2020/10/David-Header.png" alt="">
</div>
</div>
<!-- /.container -->
</div>
</body>
</html>
Here is a link to a jsFiddle
First of all, in your jsfiddle demo, it seems like you didn't include Bootstrap 4 but you tagged Bootstrap 4 in your question.
To style that person picture in the background, you can just do the same way you did on the video and the overlay: set its position to absolute, top, bottom and right to 0 so that it sticks on the right. I think the tricky part is to set its height to 100% so that it won't overflow its parent relative container.
Anyway, I've cleaned up the layout a little bit and assigned several custom CSS classes so that I can style those classes instead of directly on the elements:
<div class="jumbotron jumbotron-fluid banner">
<div class="overlay"></div>
<video />
<img src="https://geniecast.com/wp-content/uploads/2020/10/David-Header.png"
class="img-background" />
<div class="banner-content container-fluid">
<div class="showcase">
<img id="heyGoodMeeting"
src="https://geniecast.com/wp-content/uploads/2020/10/Good-Meeting-Logo.png"
class="img-fluid" />
<p class="description" />
<a class="btn btn-light btn-lg" />
</div>
</div>
</div>
And the following is the CSS to stick that person picture in the background:
.banner .img-background {
z-index: 3;
position: absolute;
top: 0;
bottom: 0;
right: 0;
height: 100%;
}
demo: https://jsfiddle.net/davidliang2008/xd2s630q/80/
I want images auto size when users resize browser window, when users resize their browser i don't want images lose any details. I only want resolution width:800px height:400px
I did my best and searched everywhere but their solution didn't work for me, i also put width 100% and max-width 100% still my webpage didn't work.
If anyone would like to gives me some advices i would very appreciate your help thank you.
Please take a look at my code.
/*slideshow*/
#slideshow {
width: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 400px;
max-width: 100%;
max-height: 100%;
margin-top: 40px;
border: 1px solid;
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontain">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontain">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontain">SlideImage3</span>
</div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
Set your .slide as background-size: cover.
See docs: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Also you can position it background-position: center center;
To keep your slide as the same size of the image you can set your padding bottom to have same ratio proportion of the image, something like:
.slide {
...
padding-bottom: 72%;
}
/*slideshow*/
#slideshow {
width: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
max-width: 100%;
max-height: 100%;
margin-top: 40px;
border: 1px solid;
padding-bottom: 72%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontain">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontain">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontain">SlideImage3</span>
</div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
Here is the correct code after hard work:
#slideshow {
width: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slidebg{
width: 100%;
height: 100%;
float:left;
margin-top: 40px;
border: 1px solid;
position: relative;
}
.slidebg:before {
content: "";
display: block;
padding-top: 50%;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
<div id="slideshow">
<div class="slidebg">
<div id="slide1" class="slide">
<span class="slidecontain">SlideImage1</span>
</div>
</div>
<div class="slidebg">
<div id="slide2" class="slide">
<span class="slidecontain">SlideImage2</span>
</div>
</div>
<div class="slidebg">
<div id="slide3" class="slide">
<span class="slidecontain">SlideImage3</span>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
I have problem : my picture doesn't want to center despite I used text-aligne:center;, display:block; and margin: 0 auto;
Here is a picture
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-attachment: fixed;
background-size: 100%;
}
#container {
max-width: 1000px;
margin: 0 auto;
}
#Logo {
text-align: center;
}
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>str</title>
<meta name="description" content=" bbbbbbb" />
<meta name="keywords" content="bablal" />
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge.chrome=1" />
<link rel="stylesheet" href="new.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400&subset=latin-ext" rel="stylesheet">
</head>
<body background="photo/ik.png">
<div id="container">
<div id="Logo">
<img src="photo/lg.png" width="800" height="533.5">
</div>
</div>
</body>
</html>
One way to do it using Flexbox.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-attachment: fixed;
background-size: 100%;
}
#container {
background: yellow;
height: 100vh;
width: 100vw;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
<div id="container">
<div id="Logo">
<img src="http://placehold.it/200x100/333333">
</div>
</div>
change #container {max-width:1000px to width:100%}
Set the margin property of the image itself to auto on the left and right.
HTML part
<body>
<div id="container">
<div id="Logo">
<img class="centeredimage" src="photo/lg.png" width="80" height="50">
</div>
</div>
</body>
CSS part
img.centeredimage{
display: block;
margin-left: auto;
margin-right: auto;
}
Fiddle:
https://jsfiddle.net/ja0zhnsd/
Try This:
.Image{
background:#ccc;
padding:30px;
}
.img-responsive{
display: block;
height: auto;
max-width: 100%;
margin:0 auto;
}
<div class="Image">
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>
#container {
width: 100%;
}
#Logo img {
text-align: center;
margin: 0 auto;
}
Does this work?
use this code this will done your job. cheers!
<p style="text-align:center;">
<img src="yourimage.png" alt="Dev N Technologies" width=600 height=200 >
I'm having issues with my menu icon. For my desktop css I have is set to display none. Under 1000px I have it set as display block. So far the icon is showing for all devices. Any assistance is appreciated.
/* blah blah blah */
.icon-dropdown {
display: none;
}
#media screen and (max-width: 1000px) {
.icon-dropdown {
display: block;
position: absolute;
left: 80%;
top: 50px;
}
.icon-dropdown div{
display: block;
background-color: black;
width: 35px;
height: 4px;
margin-bottom: 3px;
position: relative;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vintage McDonald's</title>
<meta id="meta" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/jpg" href="mcdonaldsoldlogo.png">
</head>
<body>
<div class="wrapper">
<header>
<img src="vintagelogo.jpg" width="90px" height="90px">
<h1>Vintage McDonald's!</h1>
<div class="icon-dropdown">
<div></div>
<div></div>
<div></div>
</div>
</header>
<span class="menu-trigger">Menu</span>
<nav>
<ul>
<li>ABOUT MCDONALD'S</li>
<li>OUR CLASSICS</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="slideShow">
<img class="placeHolder" src="1.jpg">
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
<div class="slideOverlay"><p>Welcome to McDonald's!<br>Come and try our NEW Big Mac!!!</p>
</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="menu.js"></script>
</body>
</html>
try to use this media query:
#media (max-width: 800px) {
.icon-dropdown {
display: block;
position: absolute;
left: 80%;
top: 50px;
}
.icon-dropdown div{
display: block;
background-color: black;
width: 35px;
height: 4px;
margin-bottom: 3px;
position: relative;
}
}
After that, try to shrink your browser to see the effect.
Try setting width and height for the icon.
I have a problem with the cursor in IE10 any ideas? It doesn't appear at all in IE10.
http://jsfiddle.net/alexnode/y4y4A/8/
<div id="bgmbutton1">
<img id="button1" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img id="obutton1" src="http://translationgames.org/images/button1.png" alt="Translation games">
<div id="otrigger1" class="button" data-case="translation"></div>
</div>
css
#bgmbutton1{position: fixed;
left: 2%;
top: 5%;
}
#button1 {width: 25%;}
#obutton1 {width: 25%;position: absolute;top:0;left:0;}
#otrigger1 {background:rgba(0,0,0,0); height:100%; width:100%; position: absolute; left: 0; top: 0; cursor: pointer; z-index:5000;}
Your approach seems to be overcomplicating things just a bit. Might I suggest a slightly more straight-forward approach instead. I've tested this to ensure it works fine in IE.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hover-Fading Buttons</title>
<style>
.button {
width: 100px;
height: 100px;
display: block;
position: relative;
}
.button img {
border: 0;
width: 100%;
top: 0; left: 0;
position: absolute;
transition: opacity .5s;
}
.button:hover .default {
opacity: 0;
}
</style>
</head>
<body>
<a class="button" href="#">
<img class="overlay" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img class="default" src="http://translationgames.org/images/button1.png" alt="Translation games">
</a>
</body>
</html>
As you can see, this does rely on the transition and opacity properties. If you require support for older browsers, you could go back to a JavaScript approach using jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hover-Fading Buttons</title>
<style>
.button {
width: 100px;
height: 100px;
display: block;
position: relative;
}
.button img {
border: 0;
width: 100%;
top: 0; left: 0;
position: absolute;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.js"></script>
<script>
$(function () {
$(document).on("mouseover mouseout", ".button", function () {
$(this).find(".default").stop().fadeToggle(300);
});
});
</script>
</head>
<body>
<a class="button" href="#">
<img class="overlay" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img class="default" src="http://translationgames.org/images/button1.png" alt="Translation games">
</a>
</body>
</html>
I hope this helps you.