I placed an image of a map and put two little markers on it (I replaced them simply with letters for the time being). The issue is, that on the mobile view they are totally in a different position than on desktop view.
Can some please explain me how can I resolve this issue and why did it happen?
<html>
<body>
<style>
.container{
width: 70%;
margin: 0 auto;
position: relative;
}
#map > img{
max-width: 100%;
max-height: 100%;
}
.marker{
height: 1.5em;
font-size: 10px;
width: 1.5em;
position: absolute;
cursor: pointer;
}
.europe{
top: 25%;
left: 50%;
}
.canada{
top: 25%;
left: 25%;
}
</style>
<div class="container">
<div id="map">
<img src="https://linmark.com/assets/site/images/network/map.png" />
<div class="marker europe">A</div>
<div class="marker canada">B</div>
</div>
</div>
</body>
</html>
My goal is to make the markers appear on the same place on both mobile view and desktop.
I think you just need a transform:translate to keep the markers "centered" in their original positions.
Recall, your elements are a fixed size but your positioning and image is % based.
.container {
width: 70%;
margin: 0 auto;
position: relative;
}
#map>img {
max-width: 100%;
max-height: 100%;
}
.marker {
height: 1.5em;
font-size: 10px;
width: 1.5em;
position: absolute;
transform: translate(-50%, -50%); /* this */
cursor: pointer;
}
.europe {
top: 25%;
left: 50%;
}
.canada {
top: 25%;
left: 25%;
}
<div class="container">
<div id="map">
<img src="http://linmark.com/assets/site/images/network/map.png" />
<div class="marker europe">A</div>
<div class="marker canada">B</div>
</div>
</div>
Codepen Demo
Related
I am trying to design a footer for my website like this:
but I've got this result, causing a horizontal scroll (red background is for better showing the problem)
.footer-container {
background-color: white;
width: 100%;
position: relative;
}
.rotate-container {
position: relative;
width: 100%;
}
.rotate-white {
position: absolute;
left: 100px;
top: -40px;
width: calc(100%);
height: 200px;
transform: rotate(-4deg);
background-color: red;
z-index: -1;
}
.rotate-grey {
top: -40px;
right: 100px;
position: absolute;
width: calc(100%);
height: 200px;
transform: rotate(5deg);
background-color: #e5e5e5;
z-index: -2;
}
.footer-top-img {
width: 290px;
position: absolute;
left: 20%;
right: auto;
top: -140px;
z-index: 1;
}
<footer style="margin-top: 150px;">
<div class="footer-container px-xl-5 w-100">
<div class="rotate-container">
<div class="rotate-white"></div>
<div class="rotate-grey"></div>
</div>
<img class="footer-top-img d-xl-block d-none" src="../global/imgs/footer/footertop.png" />
<div class="container-fluid footer-content px-xl-5">
. . .
</div>
</div>
<footer/>
How can I remove the overflow of the red div to prevent the page from scrolling?
Therefor, you need to hide the oferflow of the body itself with
body {
overflow-y: hidden;
}
I am make a banner with Bootstrap 3, but having problems keeping the aspect ratio on the banner image.
When I see the image on small viewports, the image is getting squeezed. Can anybody help me with a solution on this?
<link rel="stylesheet" href="https://use.typekit.net/nai6cyj.css">
<style>
/**** Banner ****/
.image-wrap {
position: relative;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.banner-content {
position: absolute;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
font-size: 1.5em;
color: #fff;
line-height: 1.5;
}
.img-content img {
width: 100%;
height: 80vh;
display: block;
}
</style>
<!-- Banner -->
<div class="image-wrap">
<div class="img-content">
<img src="https://www.bmw.dk/content/dam/bmw/marketNORDICS/common/All-models/BMW-i/i4/2021/BMW_G26_BEV_i4_Stage-front_2_1680x756.jpg.asset.1621330813802.jpg" alt="">
</div>
<div class="overlay"></div>
</div>
<div class="banner-content">
<h1>MAKE THE BEST OF YOUR HTML EXPERIENCE WITH YOUR DAILY LIFE</h1>
</div>
You could use object-fit: cover to have your image fill your available space while maintaining its aspect ratio. You would need to put the 80vh value on the image container.
.image-wrap {
position: relative;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.banner-content {
position: absolute;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
font-size: 1.5em;
color: #fff;
line-height: 1.5;
}
.img-content {
height: 80vh;
}
.img-content img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
display: block;
}
<!-- Banner -->
<div class="image-wrap">
<div class="img-content">
<img src="https://www.bmw.dk/content/dam/bmw/marketNORDICS/common/All-models/BMW-i/i4/2021/BMW_G26_BEV_i4_Stage-front_2_1680x756.jpg.asset.1621330813802.jpg" alt="">
</div>
<div class="overlay"></div>
</div>
<div class="banner-content">
<h1>MAKE THE BEST OF YOUR HTML EXPERIENCE WITH YOUR DAILY LIFE</h1>
</div>
You may want to adjust the banner-content so it lines up better on small screens.
When you set your width and height (by relative) together, you force the image size to change together with your screen. For your text to be not aligned in the centre, is due to your text should be within the same division as your image so that they are able to refer to the same initial point when positioning.
<link rel="stylesheet" href="https://use.typekit.net/nai6cyj.css">
<style>
/**** Banner ****/
.image-wrap {
position: relative;
width: 100%;
overflow-x: hidden;
}
.banner-content {
position: absolute;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
font-size: 1.5em;
color: #fff;
line-height: 1.5;
}
.img-content > img {
width: 100%;
display: block;
}
</style>
<!-- Banner -->
<div class="image-wrap">
<div class="img-content">
<img src="https://www.bmw.dk/content/dam/bmw/marketNORDICS/common/All-models/BMW-i/i4/2021/BMW_G26_BEV_i4_Stage-front_2_1680x756.jpg.asset.1621330813802.jpg" alt="">
</div>
<div class="overlay"></div>
<div class="banner-content">
<h1>MAKE THE BEST OF YOUR HTML EXPERIENCE WITH YOUR DAILY LIFE</h1>
</div>
</div>
I want to make vertical line in DIV.
then I want to layer img on vertical line.
(the pic shows the result I want)
For my source code is like this .
<div style="background-color:gray;width:1px;height:100%;"></div>
<img src="circle.png">
<img src="triangle.png">
How can I layer these elements???
You will need to do some math to adjust it in the center.
.outer-flex {
display: flex;
width: 40px;
align-items: center;
position: absolute;
}
.line {
background-color: gray;
width: 1px;
height: 100vh;
margin-left: auto;
margin-right: auto;
}
.circle {
position: absolute;
left: calc(50% - 15px);
top: 20px;
border: 5px solid white;
border-radius: 20px;
}
.arrow {
position: absolute;
top: 70vh;
left: calc(50% - 15px)
}
<div class="outer-flex">
<div class="line"></div>
<img src="https://www.marylandeyeassociates.com/wp-content/uploads/2015/03/red-dot-hi.png" width="21px" class="circle">
<img src="https://image.flaticon.com/icons/png/512/60/60995.png" width="31px" class="arrow">
</div>
The images are inside the div this way:
div {
background-color: gray;
width: 1px;
height: 200px;
}
img:first-of-type {
margin-left: -10px;
top: 30px;
position: relative;
}
img:last-of-type {
margin-left: -10px;
top: 85px;
position: relative;
}
<div>
<img src="https://picsum.photos/20/20" />
<img src="https://picsum.photos/20/20" />
</div>
If you know the width of the images, move them to the left with a negative margin of half their width.
It works fine on Desktop because I use width: 100%. But on Mobile I do width: 50% and try to center it.
I have tried setting the img.youtube-thumb to margin-left: auto; and margin-right: auto; I've also tried setting the images parent element to text-align: center; and having the image displayed as inline-block, and that doesn't work either.
I'm not sure what else to try, as it seems that every S.O answer I run into provides one of the two above solutions.
Here's a CodePen but I'm not sure how valuable it'll be since I cant seem to get it exact without pasting the entire project into the pen. http://codepen.io/anon/pen/yOEQKg
Here's the HTML for one of the images:
<section class="container-fluid">
<div class="section group">
<div class="col span_6_of_12">
<div class="thumbnail project">
<h3>Some title</h3>
<div class="youtube-container">
<div class="youtube-player" data-id="ZMJP-FFzaZk">
<div>
<img class="youtube-thumb" src="//i.ytimg.com/vi/ZMJP-FFzaZk/hqdefault.jpg">
<div class="play-button"></div>
</div>
</div>
</div>
<div class="caption">
<p>blablablablabla</p>
</div>
</div>
</div>
my CSS code:
/* inside media query */
.youtube-player {
position: absolute;
text-align: center;
width: 100%;
height: 100%;
}
/* inside media query*/
img.youtube-thumb {
bottom: 0;
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
width: 50%;
height: 100%;
position: absolute;
}
.project {
text-align: center;
}
/* for entire site */
.youtube-container {
position: relative;
padding-bottom: 300px; /* 16:9 */
padding-top: 25px;
height: 0;
}
/* for entire site */
div {
text-align: left;
}
/* 12 Grid Column Setup??? */
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
img.youtube-thumb {
bottom: 0;
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
width: 50%;
height: 100%;
position: absolute;
}
into this:
img.youtube-thumb {
top: 0;
display:block;
left:0;
right:0;
margin:auto;
max-width: 50%;
width: 50%;
height: 100%;
position: absolute;
}
Hope it helps
I'm using the vertical centering technique explained here on CSS-Tricks: http://css-tricks.com/centering-in-the-unknown
I have an image that needs to be vertically centered in a div. It seems to work just fine on every platform except mobile Safari/iOS, where the image is placed out of view. I can't seem to work out what the quirk or compliance issue is on mobile Safari that is causing this.
Here's the issue in a CodePen: http://codepen.io/anon/pen/iDalc
Here's my stripped down HTML and CSS
<div class="headline">
<div class="wrapper">
<a>
<div class="background">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Durga%2C_Burdwan%2C_2011.JPG/1920px-Durga%2C_Burdwan%2C_2011.JPG">
</div>
</a>
</div>
</div>
<div class="headline">
<div class="wrapper">
<a>
<div class="background">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Upper_Antelope_Canyon_Heart_Formation_2013.jpg/640px-Upper_Antelope_Canyon_Heart_Formation_2013.jpg">
</div>
</a>
</div>
</div>
<div class="headline">
<div class="wrapper">
<a>
<div class="background">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Maly_Krashokholmsky_bridge_4exp_Oloneo.jpg/1920px-Maly_Krashokholmsky_bridge_4exp_Oloneo.jpg">
</div>
</a>
</div>
</div>
And my CSS:
.headline {
background: gray;
padding: 0 3.125%;
width: 93.75%;
margin-left: auto;
margin-right: auto;
max-width: 768px;
}
.wrapper {
position: relative;
overflow: hidden;
min-height: 190px;
width: 100%;
margin-bottom: 2px;
}
.background {
position: absolute;
top: 0;
height: 100%; width: 100%;
z-index: 1;
background-color: #000;
text-align: center;
}
.background img {
width: 100%;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.background:before {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
Can anyone advise what CSS issue is happening in mobile Safari? So far, I've diagnosed it may have something to do with the transform: translate-Y property. All mobile Safari testing done on device as well as iOS simulator.
Thanks in advance!
For anyone who comes across this in any searches, I managed to fix this on my own. Changed .background img to position: absolute; and left: 0;
I don't entirely understand what's going on but whatever it fixed it. I'd also like to add that I was mistaken in my original post. Somewhere I credited CSS Tricks for the vertical centering technique I implemented, which wasn't the actual source. I had referenced the following URL: http://davidwalsh.name/css-vertical-center
Updated CodePen: http://codepen.io/anon/pen/zJugd
.headline {
background: gray;
padding: 0 3.125%;
width: 93.75%;
margin-left: auto;
margin-right: auto;
max-width: 768px;
}
.wrapper {
position: relative;
overflow: hidden;
min-height: 190px;
width: 100%;
margin-bottom: 2px;
}
.background {
position: absolute;
top: 0;
height: 100%; width: 100%;
z-index: 1;
background-color: #000;
text-align: center;
}
.background img {
width: 100%;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.background:before {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}