I'm trying to make solid markup and style for following XD layout
I added bootstrap for the full project but I'm confused about how I write markup and style for this layout with keep in mind responsiveness!
.hb-block-content-part {
position: relative;
width: 100%;
height: 100vh;
background-image: url("../images/bg-two.png");
background-size: cover;
background-position: center center;
}
.hb-block-content-part::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 100%, rgba(0, 0, 0, 0) 100%);
}
.left-image {
position: relative;
}
.left-image .l-main-image {
float: right;
position: relative;
margin-left: 30%;
margin-top: 10%;
z-index: 2;
}
.left-image .l-overlay-image {
position: absolute;
left: -20%;
top: 20%;
z-index: 3;
}
.left-image .l-yellow-image {
position: absolute;
left: 10%;
top: 0;
z-index: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="hb-block-content-part">
<div class="container-fluid px-10-percent">
<div class="hb-block-content">
<div class="left-image">
<div class="l-main-image">
<img class="img-fluid" src="https://i.imgur.com/JQl8Uyb.jpg" alt="">
</div>
<div class="l-overlay-image">
<img class="img-fluid" src="https://i.imgur.com/gBJ6kwB.jpg" alt="">
</div>
<div class="l-yellow-image">
<img class="img-fluid" src="https://i.imgur.com/rfk6tzn.jpg" alt="">
</div>
</div>
<div class="right-content">
</div>
</div>
</div>
</div>
Can you provide the mobile version of this design?
Bootstrap 4 has classes for positions and grids, make sure you check the documentation here: https://getbootstrap.com/docs/4.4/layout/overview/
You should work with flexbox or grid for a better result with responsive layouts.
See below links about:
Grid:
https://css-tricks.com/snippets/css/complete-guide-grid/
Flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I have this working on a project that convert div into images. everything works but I have having this problem on mobile resizing. anytime the web page loads for the first time I will have to use my hand to zoom in for it to fit mobile screen size. I have several method for it work but is not working. Take a look at my code and see if am doing it right. Am not good with JavaScript if there a script to get done I will be open to
<div class="container" >
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-7" style="background-color: #fff;">
<div id="outer">
<div class="meme-generator " >
<div class="meme-generator-wrapper" id="memeGeneratorWrapper">
<div id="memeGeneratorImg">
</div>
<div id="memeOverlay" class="meme-hidden meme-generator-overlay"></div>
<h4 class="name" id='outputAccHomePagePermalink'></h4>
</div>
<div class="meme-generator-controls">
<a class="button button-primary meme-upload" href="#" style="font-size: 17px; font-weight:bold;">
<label>
<input id="memeAddPhoto" type="file">
</label>
Add Photo
</a>
<a class="button button-primary" id="memeClearPhoto" href="#" style="font-size: 17px; font-weight:bold;">Clear Photo</a>
<button class="button button-primary" id="foo" style="font-size: 17px; font-weight:bold;">download</button>
</div>
<div class="home_page_title">
<input id="nameField" type="text" name="Accessable[accsc_home_page_title]" placeholder="Enter Your Name Here"
data-depend-id="accsc_home_page_title" style="font-size: 17px; font-weight:bold; margin-top: 20px;">
</div>
</div
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
.meme-generator-wrapper {
position: relative;
margin-bottom: 80px;
width: 492px;
height: 607px;
background: url("{% static 'dp.png' %}") no-repeat center right #222228;
-webkit-background-size: contain;
-moz-background-size: contain;
-ms-background-size: contain;
background-size: contain;
}
.meme-generator-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("{% static 'dp.png' %}") no-repeat 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
z-index: 1;
}
.meme-generator-controls {
margin-top: 10px;
}
.meme-upload {
position: relative;
}
.meme-upload label {
background: #000;
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
opacity: 0;
top: 0;
left: 0;
}
.meme-upload input {
cursor: pointer !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cr-slider-wrap{
position: absolute;
bottom: 100%;
z-index: 99;
}
.name{
text-align: center;
font-size: bold;
text-transform: capitalize;
color :#ee2047 !important;
font-weight: bold;
}
.home_page_title input{
width:71%;
border: 1px solid #091639;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.meme-generator-controls .button {
background-color: #091639;
}
.meme-generator-controls .button:hover {
background-color: #ee2047
}
#media (max-width: 767px) {
.cr-slider-wrap{
position: absolute;
bottom: 100%;
left: 10%;
z-index: 99;
}
#wrap {
position: fixed;
max-width: 100%;
height: auto;
margin: 0 auto;
}
#outer {
left: -20px;
padding-left: 30px;
padding-top: 70px;
padding-bottom: 70px;
position: fixed;
width: 180%;
background: #fff;
transform-origin: 0% 0%;
border-radius: 10px;
box-shadow: 0px 3px 25px rgba(223, 207, 207, 0.2);
}
#mob{
width: 100vh;
}
}
Looks like you are using bootstrap, usually you can use the classes:
"img-responsive" for bootstrap 3
"img-fluid" for bootstrap 4
If you want to scale an image just using CSS though, you can set the max-width to 100% on the image tag. I have included a bootstrap example for using img-fluid on the img tag - Hope it helps :)
<!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>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" >
<div>
<img src="img.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</body>
</html>
I am trying to create a slideshow embedded inside a smartphone image for my website in the below URL link but the images are not fitted accurately.
so please help out to solve this issue
images inside the slider not fitted into the smartphone screen i.e width and height, can we make the images scroll inside the smartphone accurately display
url link of website
.dm-width {
width: 350px;
margin: 75px;
}
.iphone-mockup {
position: relative;
z-index: 5;
}
.dm-device {
position: relative;
width: 100%;
padding-bottom:203.477897%;
margin-bottom: 20px;
}
.device {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(https://res.cloudinary.com/di5yipnns/image/upload/v1482236588/apple-iphone_aivldo.png);
background-size: cover;
background-position: center center;
}
.screen {
overflow: hidden;
position: absolute;
top: 18.1%;
bottom: 20.6%;
left: 12.49%;
right: 17.4%;
background-color: #E91E63;
}
.slider {
height: 100%;
}
.slider div {
height: 119%;
padding: 30px;
}
.slider__item {
font-size: 100px;
color: rgba(255,255,255,0.7);
display: flex;
justify-content: center;
align-items: center;
}
.slider__item--2 {
background-color: #2196F3;
}
.slider__item--3 {
background-color: #4CAF50;
}
.slider__item--4 {
background-color: #FFC107;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
<div class="dm-width">
<div class="dm-device">
<div class="device">
<div class="screen">
<div class="slider">
<div class="slider__item slider__item--1">
<img src="inc/img/new_2.jpg" alt="app download" >
</div>
<div class="slider__item slider__item--2">
<img src="inc/img/new_1.jpg" alt="app download" >
</div>
<div class="slider__item slider__item--3">
<img src="inc/img/new_3.jpg" alt="app download" >
</div>
<div class="slider__item slider__item--4">
<img src="inc/img/new_4.jpg" alt="app download" >
</div>
</div>
</div>
</div>
</div>
</div>
I need only the first and last card in this set of cards to be horizontally centered. Each card's height is set to be 70%, so the width is responsive... if the width was a fixed percentage I could simply calculate what the margin-left should be to center the first card and calculate what the margin-right should be to center the last card, but the width is responsive and not fixed... any workaround for this?
Currently I've just made a guess and eyeballed what center would be by using margin-left and margin-right, but they are obviously not correct on all viewports. I need them perfect.
Maybe this requires JS? Really looking for a css solution though.
TO CLARIFY I am not looking to horizontally center all of the cards. I am only looking for the first and last card to be horizontally centered. The cards between the two are simply positioned inline relative to where the first card starts. A little tricky to explain, so here (https://jsfiddle.net/g5avo673/) is a JSFiddle demonstrating exactly what I mean. It is easily accomplished here because the widths are defined so I'm able to calculate what the margins need to be to center the first and last card, the issue with my code is that the widths are not defined, only the height, so I'm unable to calculate what the margins need to be when the widths are responsive.
JSFiddle:
https://jsfiddle.net/yn93phse/
Code:
<div id="horizontalproductcontainer">
<div id="scrolling-wrapper">
<div class="productcardfirst">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcardlast">
<img src="images/.jpeg" alt="." class="productimage1" />
</div>
</div>
</div>
#horizontalproductcontainer {
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
#scrolling-wrapper {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
margin: 0 auto;
height: 100%;
width: 100%;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.productcardfirst {
display: inline-block;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
margin-left: 30%;
padding-right: 3%;
}
.productcard {
display: inline-block;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
padding-right: 3%;
}
.productcardlast {
display: inline-block;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
margin-right: 30%;
}
.productcard img,
.productcardfirst img,
.productcardlast img {
height: 100%;
}
You can simplify your CSS by grouping common attributes as below and remove productFirst and productLast classes (you can keep them if you want to add extra styling), then make every product 100% width.
Given the above, all you need to do is to apply a left coordinate of 30% to all products (works for any number of elements):
#horizontalproductcontainer {
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
#scrolling-wrapper {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
height: inherit;
-webkit-overflow-scrolling: touch;
}
.productcard {
display: inline-block;
position: relative;
top: 25%;
left: 30%;
height: 40%;
width: 100%;
/* padding: 3%; */
}
.productcard img {
width: 40%;
}
<div id="horizontalproductcontainer">
<div id="scrolling-wrapper">
<div class="productcard">
<img src="https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-650-80.jpg" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-650-80.jpg" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-650-80.jpg" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-650-80.jpg" alt="." class="productimage1" />
</div>
</div>
</div>
I have found a workaround for this and hope that it will work for anyone else running into a similar issue:
To reiterate, I had a string of images that needed to have a height of exactly 70vh. This resulted in variable widths, which made horizontally centering the first and last image within the string impossible without using javascript. The method that worked for my case was to wrap each image inside a div that had a fixed width percentage. For images that are super wide, this will not work, but in my case, the images are all exactly squares. Using this method, I can keep all my images' height at exactly 70vh, while still centering the first and last images in the string.
JSFiddle demo: https://jsfiddle.net/8u4mbk17/
Code:
<div id="horizontalproductcontainer">
<div id="scrolling-wrapper">
<div class="productcardfirst">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcardlast">
<img src="images/.jpeg" alt="." class="productimage1" />
</div>
</div>
</div>
#horizontalproductcontainer {
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
#scrolling-wrapper {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
margin: 0 auto;
height: 100%;
width: 100%;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.productcardfirst {
display: inline-block;
position: relative;
height: 70%;
width: 40%;
top: 50%;
transform: translateY(-50%);
margin-left: 30%;
}
.productcard {
display: inline-block;
position: relative;
height: 70%;
width: 40%;
top: 50%;
transform: translateY(-50%);
}
.productcardlast {
display: inline-block;
position: relative;
height: 70%;
width: 40%;
top: 50%;
transform: translateY(-50%);
margin-right: 30%;
}
.productcard img,
.productcardfirst img,
.productcardlast img {
height: 100%;
}
I'm just building out this UI for a mod I'm making that starts off completely invisible and elements pop in to provide information based on usage in-game.
Here's an image for example:
I want each element to remain invisible with the only permanent one being the microphone. Each other element will fade in on use and fade back out when the bar is full.
I was just wondering how I would get each box to push to the left as they fade in so the UI operates smoothly and I don't get any large gaps in between each element if one is showing and another isn't.
How would I make them reposition based on which are active/being used?
body {
background: linear-gradient(#e66465, #9198e5);
background-repeat: no-repeat;
background-size: 1920px 1080px;
}
.box1 {
position: absolute;
right: 170px;
bottom: 37.5px;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.box2 {
position: absolute;
background: rgba(0, 0, 0, 0.4);
right: 230px;
bottom: 37.5px;
width: 50px;
height: 50px;
}
.box3 {
position: absolute;
background: rgba(0, 0, 0, 0.4);
right: 290px;
bottom: 37.5px;
width: 50px;
height: 50px;
}
<body>
<div class="container">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
</body>
You better make use of reusable css classes and then binding your toggling boxes with some js event.
If you do it right, the elements will place themselves at the right spot everytime.
Take a look at this example:
const togglingBoxes = document.querySelectorAll('.js-toggle');
setInterval(() => togglingBoxes.forEach(box => box.style.display = Math.random() > 0.5 ? 'inline-block' : 'none'), 500)
body {
background: linear-gradient(#e66465, #9198e5);
background-repeat: no-repeat;
background-size: 1920px 1080px;
}
.container {
position: absolute;
right: 170px;
bottom: 37.5px;
}
.box {
display: inline-block;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.4);
margin-left: 10px;
}
<body>
<div class="container">
<div class="box js-toggle">
1
</div>
<div class="box js-toggle">
2
</div>
<div class="box">
3
</div>
</div>
</body>
I have 2 images, I have to display one image on the other image.I need to display the 2 images like below exactly.
The following is the code which I have tried, its not coming prperly.can any one please help me to fis this issue?
.my_banner{
background-image: url('http://i.stack.imgur.com/E4s7Z.gif');
background-repeat: no-repeat;
position:absolute;
top: 0px;
left: 150px;
width: 100%;
height: 100%;
z-index: 100;
}
<div>
<img class="my_banner"></img>
<img src="http://i.stack.imgur.com/rQ8Ku.jpg" width="100%" height="100%"></img>
</div>
You may use position: absoulute; and adjust the top and left to fit it.
.block {
position: relative;
}
.overlap {
position: absolute;
width: auto;
height: 60%;
top: 15%;
left: 13%;
z-index: 100;
}
<div class="block">
<img src="http://i.stack.imgur.com/rQ8Ku.jpg" width="100%" height="100%" />
<img class="overlap" src="http://i.stack.imgur.com/E4s7Z.gif" />
</div>
Try this https://jsfiddle.net/2Lzo9vfc/8/
HTML
<div class="banner">
<img src='http://i.stack.imgur.com/E4s7Z.gif' alt="">
</div>
CSS
.banner {
background: url('http://i.stack.imgur.com/rQ8Ku.jpg');
background-size: 100% auto;
background-position: top center;
position: relative;
background-repeat: no-repeat;
height: 200px;
}
.banner img {
left: 12%;
position: absolute;
width: 12%;
}