I am trying to recreate this background on mobile view, not sure if I should be creating the shapes or should I just use a background image and call it a day.
Appreciate any help or insight that I can get.
Here's my attempt to create 3 parts of shapes, right now the values are kinda hardcoded, so if a different device is used, the shape might not be consistent.
https://codepen.io/2EZHenry/pen/MWqaVXz
<div class="outerdiv">
<div class="container">
text
</div>
</div>
.outerdiv {
height:400px;
width:200px;
border:1px solid black;
display:flex;
align-items:center;
justify-content:center
}
.container{
height:50px;
width:100%;
background:blue;
position:relative;
}
.container::before{
content: "";
left: 0;
height: 180px;
position: absolute;
width: 100%;
bottom: 100%;
background: blue;
border-top-right-radius: 100%;
}
.container::after{
content: "";
left: 0;
height: 180px;
position: absolute;
width: 100%;
top: 100%;
background:blue;
border-bottom-left-radius: 100%;
}
Use relative units like Anil mentioned, then use media queries to target each specific device with modified css for that device.
#media only screen and (min-width: 275px) { ** css here ** }
#media only screen and (min-width: 769px) { ** css here ** }
Related
I have an image on my website that I'm making but when I am on the website on mobile the image is zoomed in on a bad part of the image rather than the focal point of it. I want to figure out a way in CSS that when shrinking the webpage down to a mobile size it zooms in on the center of the image rather than the bottom left so that I don't have to use a separate image for mobile. Thank You.
Do some research into media queries they could help.
Adapted from https://stackoverflow.com/a/19744413/3807365
.frame {
width: 128px;
height: 128px;
overflow: hidden;
position: relative;
}
.frame img {
position: relative;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
/* for demo: */
.big-frame {
position: relative;
width: 256px;
height: 256px;
display: flex;
}
.big-frame>img {
position: absolute;
opacity: 0.25;
}
.frame {
left: 64px;
top: 64px;
}
<div class="big-frame">
<img src="https://picsum.photos/id/211/256">
<div class="frame">
<img src="https://picsum.photos/id/211/256">
</div>
</div>
You can use Media Queries to write CSS for specific resolutions and screen orientations. Hope this helps! Example:
// Mobile resolution
.img {
width: 500px;
height: 300px;
object-fit: cover;
}
// Larger screens
#media (min-width: 992px) {
.img {
width: 100%;
height: 300px;
}
}
I really want to know how to achieve this kind of structure using HTML CSS including media queries. See image below:
On smaller screens section 1 will be on top overlapping little portion of the picture contained by section 2.
You must see the picture above to understand my question. The main problem is I really want to do something like this but I don't know where start. I don't want to break any CSS structure using negative margins and padding.
Is this what you are after? Resize the browser window (make it smaller) to see the effect.
HTML:
<div id="section1">
</div>
<div id="section2">
<div id="overlay">
Overlay
</div>
</div>
CSS:
#section1 {
float: left;
width: 50%;
height: 200px;
background: grey;
}
#section2 {
width: 50%;
height: 200px;
background: black;
float: right;
position: relative;
}
#overlay {
position: absolute;
top: 90px;
left: -20px;
background: red;
}
#media screen and (max-width: 480px) {
#section1, #section2 {
float: none;
}
#overlay {
position: absolute;
top: -10px;
left: 90px;
background: red;
}
}
JSFiddle
I'm really stuck on this and would appreciate any direction.
I need to code the following design using CMS and html but I have no idea how to get the center image to overlap the divs on the right and left of the image. I have been reading about relative position and z-indexes but everything that I have tried has failed. Generally when I line up three dives across I will use the float property and it works perfectly but it turns out z-indexes can only be used with positioned elements. If someone could get me started in the right direction I will probably be able to figure it out.
See the design I am trying to code here: https://cdn.shopify.com/s/files/1/0211/8026/files/Example.png?9982
This is the base framework but I don't know where to go from here...
.row-container {
width: 100%;
height: 300px;
margin: auto;
text-align: center;
position: relative;
}
.box1 {
height: 216px;
width: 288px;
float: left ; /* <-- This does not work */
border: 1px solid blue;
}
.image {
height: 250px;
width: 350px;
float: left ; /* <-- This does not work */
border: 1px solid grey;
}
.box2 {
height: 216px;
width: 288px;
float: left; /* <-- This does not work */
border: 1px solid red;
}
<div class="row-container">
<div class="box1"></div>
<div class="image">-- Should I use a div for the image?</div>
<div class="box2"></div>
</div>
Try this it would have worked a bit more better if position:absolute is used but since you wanted float there will be re sizing problems Fiddle
Zoom out to get the effect
.row-container {
width: 100%;
height: 300px;
margin: auto;
text-align: center;
position: relative;
}
.box1 {
position: relative;
z-index: -1;
background: green;
height: 216px;
width: 288px;
float: left;
}
.image {
margin-left: -80px;
background: red;
float: left;
height: 250px;
width: 200px;
}
.image img {
width: 300px;
}
.box2 {
position: relative;
z-index: -1;
float: left;
background: blue;
height: 216px;
width: 288px;
}
<div class="row-container">
<div class="box1"></div>
<div class="image">
<img src="http://placekitten.com/300/301" />
</div>
<div class="box2"></div>
</div>
You can do it without floats using position: (colors added for emphasis)
fiddle
.row-container {
width:900px;
height:300px;
margin:auto;
text-align: center;
border:2px solid black;
background-color:blue;
position:relative;
}
.box1 {
height:216px;
width: 288px;
left:0px;
position:absolute;
z-index:10;
}
.image {
height:250px;
width: 350px;
position:absolute;
top:20px;
left:275px;
z-index:100;
background-color:red;
}
.box2 {
height:216px;
width: 288px;
right:0px;
position:absolute;
z-index:10;
}
div{
background-color:green;
}
You can use z-index on position: relative, so add that to your inner elements and set the z-index.
To create the overlap you can use a negative margin-left on the second and third elements.
How can I make the divs side by side and one of the div ('contentwrapper') be responsive to the browser resizing.
HMTL
<div id="maincontainer">
<div id="leftcolumn"> </div>
<div id="contentwrapper"> </div>
</div>
CSS
#maincontainer {
width:100%;
height: 100%;
}
#leftcolumn {
display:inline-block;
width: 100px;
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
width:100%;
height: 100%;
background-color: red;
}
JSFIDDLE http://jsfiddle.net/A5HM7/
<style>
#maincontainer {
width:100%;
height: 100%;
}
#leftcolumn {
float:left;
display:inline-block;
width: 100px;
height: 100%;
background: blue;
}
#contentwrapper {
float:left;
display:inline-block;
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: calc(100% - 100px);
height: 100%;
background-color: red;
}
</style>
Ok, so I think this will be the quickest fix for you. You already have a great html structure but I am going to narrow it down more for you. Here is the JsFiddle.
With your code:
#maincontainer {
width:100%;
height: 100%;
}
I have made a minor adjustment like so:
#maincontainer {
width:100%;
height: 100%;
display:inline-block;//added this
}
and then I also restructured two other things like so:
#leftcolumn {
float:left;//added this
width: 100px;
height:100%;
background: blue;
}
#contentwrapper {
float:right;//added this
width:100%;
height: 100%;
background-color: red;
}
Now in this JsFiddle, I have appropriately created a specific width, so you can always change that. Please keep in mind that if you use 100% as a width, and try to stick something else in that same line, it will automatically create two lines such like so:
#leftcolumn {
display:inline-block;<-- changed this above.
width: 100px;<----This won't work with the below
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;<---- changed this above.
width:100%;<---- This won't work with the above
height: 100%;
background-color: red;
}
But if you restructure that to be more like this:
#leftcolumn {
display:inline-block;
width: 10%;<---This will work with the below
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
width:90%;<---This will work with the above.
height: 100%;
background-color: red;
}
A few things to note, I did add in a height with the JsFiddle so that I could see the actual dimensions and I also added in width for the exact reason. Something to note that can really help out with implementations and the basic "why does this work" is this.
Comment below if something doesn't work for you :)
It's also possible to get 2 div's beside each other without using float's or absolute positioning.
I'm using the calc function which is supported in IE9 and above.
MDN calc specs
And don't forget the space blocker Stackoverflow: 50% wont fit because hidden space between divs
<!-- HMTL -->
<div id="maincontainer">
<div id="leftcolumn"> </div><!-- space blocker
--><div id="contentwrapper"> </div>
</div>
CSS
#maincontainer {
width:100%;
height: 100%;
}
#leftcolumn {
display:inline-block;
width: 100px;
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
width: calc(100% - 100px);
height: 100%;
background-color: red;
}
there are multiple possibilities, but the easiest is using flexbox. See the documentation of the flexible box layout module for more info. Note that it is still a candidate recommendation, so some browsers could have problems with it.
#maincontainer {
width:100%;
height: 100%;
}
#leftcolumn {
display:inline-block;
position: absolute;
width: 340px;
float: left;
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
margin-left: 340px; // see how this is equal to the width of #left-column
position: absolute; // might want to try with this or position relative
max-width: 100%;
width: 100%; // might want to try with or without this line
height: 100%;
background-color: red;
}
Here is my html
<div class="container">
<img src="something" class="avatar"/>
<div class="edit_photo">Edit</div>
</div>
"edit_photo" has an image on it's background. the img tag dimensions is not set so it could be anything. But I want the "edit_photo" div to always be on the bottom right corner of the img. Is this possible with css? I can't think of a way to do this. the img tag needs to always be an img tag and I can't change it to a div.
Thank you!
I think this may be possible:
CSS:
.container{
position: relative;
display: inline-block;
}
img{
background: red;
height: 120px;
width: 250px;
}
.edit_photo{
position: absolute;
bottom: 0;
right: 0;
background: blue;
height: 25px;
width: 25px;
}
Here's a JSFiddle to see: http://jsfiddle.net/gW9PK/
You might need to play around with the .edit_photo and nudge it up a little bit.
The container should be position: relative; and the edit_photo position: absolute; like this:
.container {
position: relative;
/* inline-block for 100% of child width */
display: inline-block;
border: 3px solid #ddd;
}
img {
/* for 100% height of the container */
display: block;
}
.edit_photo {
position: absolute;
right: 5px;
bottom: 10px;
/* Some color */
background: red;
padding: 2px 4px;
border-radius: 3px;
color: white;
}
UPDATED DEMO WITH MULTIPLE IMAGES: http://jsfiddle.net/HYQLQ/3/
write this code in css
.container{
position: absolute;
}
.edit_photo{
position: absolute;
bottom:0px;
right:0px;
widht:20px;
height:20px;
}
edit_photo
{
bottom:-600
top:30px;
right:5px;
}
play with the numbers.