I am using the Bootstrap grid system to organise objects because I need to ensure the site is mobile-friendly. All objects adjust well to the resolution of the screen except for 1 gif.
On full resolution screen, the gif is 500x500 pixels and is perfectly sized to fit with the rest of the screen. However, on mobile (all devices), it remains 500x500, even when this makes it larger than the screen. Interestingly, on iPad pro (not other iPad) it assumes a width of 102.4 pixels, retaining height of 500.
All other items adjust perfectly and stay inside the viewport.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
<link
href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
html {
max-height: 100%;
max-width: 100%;
}
.logo {
color: #000000;
box-sizing: border-box;
object-fit: cover;
max-width: 10vw;
overflow: hidden;
}
#media only screen and (max-width: 768px) {
[class*="col-"] {
width: 100%;
max-width: 700px;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-7 name">
<p>text</p>
</div>
<div class="col-sm-5 logo">
<img src="./cubegif.gif" class="image.fluid" alt="logo">
</div>
</div>
</div>
</body>
</html>
I am considering if the predefined size of the .gif is overriding whatever I am doing, but that does not explain the change on ipad pro.
I managed to find an answer! Posted below n case anyone else finds this thread and has the same problem:
in the HTML img tag, I gave it the following class:
<img class="fixed-ratio-resize" src="./cubegif.gif" alt="logo">
and added the following CSS:
`.fixed-ratio-resize {
max-width: 100%;
height: auto;
width: auto\9;
}`
I found this solution on http://www.dynamicdrive.com/forums/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-Design
Many thanks for all contributions!
Some quotation marks were missing in your code?
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-7 title">
<p>text text text text</p>
</div>
<div class="col-xs-5 logo">
</div>
</div>
</div>
</body>
Related
When my screen goes from full screen to half screen it causes my img to to overlap my article p text.
In full screen my img is located on the right hand side of the screen, but when I use half screen mode it causes the img to sit ontop on the text located on the left hand of the screen.
<article>
<p id="talkbubble">test</p>
</article>
<div>
<img align="right" style="margin-top: -150px; margin-right: 40px;" src="img.pic" alt="img--3">
</div>
I want to be able to adjust the screen size and it not change where things are located on the screen.
thanks,
It's not a good practice to use negative margin. You're forcing img element moving up with margin-top: -150px. Use display flex if you want items be next to each other. For example:
<div style="display: flex">
<article>
<p id="talkbubble">test</p>
</article>
<div>
<img src="img.pic" alt="img--3">
</div>
</div>
Try to use flexbox with the row-direction and space-between content justification.
<!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>Document</title>
</head>
<body>
<div id="container">
<article>
<p id="talkbubble">test</p>
</article>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/HammockonBeach.jpg/500px-HammockonBeach.jpg"
alt="img--3">
</div>
</div>
<style>
body {
box-sizing: border-box;
border: solid 1px red;
}
#container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
</style>
</body>
</html>
I have some html that should create an image up top, and an image gallery underneath.
<!DOCTYPE html>
<html lang="en">
<head>
<title>your page title goes here</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<h1>My Photo Gallery</h1>
<div class="gallery">
<figure>
<img src="img/dog1.jpeg" alt="first dog">
<figcaption>Example Photo</figcaption>
</figure>
<div class="img-bar">
<img src="img/dog2.jpeg" alt="second dog"/>
<img src="img/dog3.jpeg" alt="third dog"/>
<img src="img/dog4.jpeg" alt="fourth dog"/>
<img src="img/dog5.jpeg" alt="fifth dog"/>
</div>
</div>
</div>
</body>
</html>
In order to style the image gallery, I've added the following styles:
.img-bar{
display: flex;
}
img {
width: 100%;
}
.img-bar img {
object-fit: cover;
width: 300px;
height: 300px;
}
All of the image files have dimensions > 300px by 300px, so I would expect them to follow the CSS rules. However, as you can see from the photo below, the second image doesn't follow the rules (it's taller than it is wide). As an fyi, the actual dimensions of that image file are 934px x 1401px.
Any help would be appreciated! Thanks.
You want to set the dimensions of your container, then have the image inside expand to fill it. I'd reshuffle it like this:
img {
width: 100%;
height: 100%;
object-fit:cover;
}
.img-bar {
display:flex;
width: 300px;
height: 300px;
}
This will of course apply to all images, so you might want to either add a class for the images inside img-bar or set the dimensions for your figure element containing the main image.
I have some divs arranged in a way so that there are two columns, and a box that overlaps between them. For reasons I can't figure out, the div extends just slightly past the page width, causing a horizontal scroll bar to appear (which is bad).
Additionally, the left most div extends below the background image of the parent div, which should not be possible.
Why are these divs not lining up neatly?
My HTML code is below. I am not using a snippet as the snippet shows the output in responsive mode which does not demonstrate the issue. I know that inline CSS is advised against, and it is only used for the purpose of this question.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Demo Page</title>
</head>
<body class="d-flex flex-column h-100">
<div style="height:500px;background-image:url(https://www.w3schools.com/howto/img_parallax.jpg);background-position:center;background-size:cover;">
<div class="row pb-3" style="height: 520px; position:relative;">
<div class="p-3" style="position:absolute; background:white; top:100px; height:220px; width:400px; z-index: 2;">
<h1>Text to overlap here</h1></div>
<div class="col-md-3" style="background:grey;"> </div>
<div class="col-md-9" > </div>
</div>
</div>
</body>
</html>
Just add to row with class pb-3
.pb-3{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
You can also add to div with class p-3
.p-3{
max-width: 100%;
}
Avoid using "height" and use min-height /max-height instead.
Is it possible to get this page layout using Bootstrap 3?
Header is fluid.
Navigation is 250px wide and 100% in height. Content takes up the rest.
When it comes to content, Bootstrap is brilliant. But I struggle to get the desired result when it comes to dividing the page the way I want.
Could go for Flexbox as mentioned here Bootstrap 100% height with navbar, but I need support for IE10.
Can this be done entirely in Bootstrap with minor adjustments or do I have to go with a separate file for the layout?
Try the below code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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"></script>
</head>
<body>
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12" style="background-color:grey; text-align:center;">Header</div>
</div>
<div class="row" >
<div style="background-color:lightcyan; text-align:center;" class="col-xs-4 col-sm-4 col-lg-4">Navigation</div>
<div style="background-color:lightgrey; text-align:center;" class="col-xs-8 col-sm-8 col-lg-8">Content</div>
</div>
</body>
</html>
you can use bootstrap but with custom css file. example here
This could be a CSS file linked to your bootstrap design. It will be quite easier to update, and you will have a clear separation between global layout design and content design.
html, body {
margin : 0px;
width : 100%;
height : 100vh;
}
body .header {
width : 100%
height : 10vh;
background-color : #aaa;
}
body .flex-line {
display : flex;
}
body .nav {
width : 250px;
height : 100%;
background-color : #ccc;
}
body .content {
width : 100%;
height : 100%;
background-color : #eee;
}
p {
text-align : center;
font-family : Arial;
}
<html>
<body>
<div class="header">
<p>Header</p>
</div>
<div class="flex-line">
<div class="nav">
<p>Navigation</p>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
</body>
</html>
I hope it will be helpfull.
Hi i searched it a lot but i cannot find any solution.
Actually I want to have image for every HTML section. and it should be responsive.
here is my code
<section id="portfolio">
</section>
<section class="success">
</section>
and CSS
#portfolio {
background: url(../img/STS_247650163-Web.jpg);
background-size: cover;
height:400px;
}
.success {
background: url(../img/success.jpg);
background-size: cover;
height:1100px;
}
now if I remove height the images disappear and if add them the images becomes big and ugly.
i tried.. different method but nothing is working
thank you
You have two ways to make responsive images.
Use bootstrap- .img-responsive
use custom media queries -
#media screen and (max-width: 368px) {
img.yourclass{
min-height: 150px or auto;
}
}
Better use bootstrap for your divs or section, try this -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img class="img-responsive" src="http://placehold.it/350x150" alt="Chania" width="460" height="345">
</div>
</body>
</html>