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>
Related
this is my code for my portfolio page and the links for my first row of images do not seem to be working
this screenshot shows which images links are not working
the CSS for this is here, so not too sure what i have done wrong
Check your folder structure first. Maybe that is the problem. Also, please write the code in your questions. It's easier for us to see the problem you are facing.
Added note
It's better in your case to make the parent element, div gallery, a grid.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
margin: 20px;
display: grid;
grid-template-columns: auto auto auto;
grid-row-gap: 10px;
grid-column-gap: 10px;
text-align: center;
}
.gallery img {
width: 100%;
}
<!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="./index.css" />
<title>Document</title>
</head>
<body>
<div class="gallery">
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
</div>
</body>
</html>
This question already has an answer here:
how to centre align div horizontally when using flex direction column
(1 answer)
Closed 8 months ago.
So I tried putting the banner-content-container in the center after using flex-direction:column; in the media query, but it doesn't work. It centers normally but when it gets to the 776px max-width, It doesn't center the div.
Here's my code:
.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}
#media screen and (max-width:776px) {
.banner-content-container {
display: flex;
justify-content: center;
flex-direction: column;
}
}
<!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 class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>
</html>
Changing the flex-direction flips your main axis.
When in row mode, horizontal alignment is achieved via flex-direction and vertical alignment with align-items. In your breakpoint, the opposite is now true.
.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}
#media screen and (max-width:776px) {
.banner-content-container {
align-items: center;
flex-direction: column;
}
}
<!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 class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>
</html>
Note also that you don't need display: flex within your media query; it's already set in the statement above, media queries don't reset properties.
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.
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>
I'm stuck in a problem, I want to show the relative element in front of absolute element, I know z-index don't work with relative elements. How can I show the image in front of the strip.
http://jsfiddle.net/Q9EEv/9/
<!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">
<title>Teset</title>
<style>
.container {
width: 1170px;margin:auto
}
.footer-elements{text-align:center;bottom:0;height:15em}
.footer-elements .content-b{text-align:center;position:relative;height:10em}
.footer-elements .content-b img.main-img{text-align:center;width:18em;margin-top:-3em}
.footer-elements .content-b .strip-m{background:#231F20;height:9em;}
.footer-elements .content-b .strip-border{width:100%;height:1.3em;position:absolute;top:0;left:0%;background-size:auto 100%;
background:url(http://i666.photobucket.com/albums/vv22/SincerelyBerry/HAIJYNX/backgrounds/stripes.png) repeat-x;}
</style>
</head>
<body>
<!-- container Start -->
<div class="container">
<br><br><br><br><br><br><br>
<div class="footer-elements">
<div class="content-b">
<div class="strip-m row">
<div class="strip-border"></div>
<img src="http://i252.photobucket.com/albums/hh15/liveyourlife815/stripes-1.png" class="main-img" alt="footer">
</div>
</div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/Q9EEv/9/
Absolute element is strip so I want it on back on that relative image.
Thanks
Here you go: http://jsfiddle.net/Q9EEv/10/
.content-b img
{
position: relative;
}
You solved it your self. But z-index does work on every positioned element (not static).