I'm reworking a design of an app a friend gave to me just so I can learn some more CSS while starting out.
I wanted the app to be designed like a window in a window so I had margins added to all elements, 90% of it looks fine but it's not really responsive so I must be doing something wrong.
This is how it looks on my monitor (the bottom of both content and navbar is aligned):
This is how it looks on the laptop's monitor
The bottom of the content container is sticking out. Now I know the problem is because I aligned it using the max and min-height and doing it manually, so I would need to know the code to do it properly so it's responsive on all screens.
Current code:
Navbar:
background-color: rgba(0, 0, 0, 0.096);
box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
margin-left: 50px;
margin-top: 20px;
border-bottom-left-radius: 25px;
border-right-width: 2px;
container:
position: relative;
top: 70px;
margin-left: 280px;
min-height: calc(95vh - 82px);
max-height: calc(95vh - 82px);
background-color: #f0f0f0da;
margin-right: 30px;
overflow-y: scroll;
overflow-x: hidden;
My body also has a margin of 50px on all
Hope I explained my problem properly and thank you a lot.
Use a display: flex; display: wrap; for parent elements
Try to define a width: 100%; for both elements.
max-width: 30%; for .nav
max-width: 70%; for .container
Related
I've got a flexbox container in which I'm trying to display two images with drop-shadows side-by-side. I want them to take equal amounts of horizontal space even though the images differ in size. I'm using a container with style "display: flex" and using "object-fit: contain" for the images to cause them to scale. My code works if I don't give the container a specific height. If I give the container a specific height, such as 300px, the images scale down, but the drop-shadow appears at a distance from the image edges as though there's a box wrapping them. This seems odd behavior. Can anyone explain this odd-seeming behavior, and is there a way in which I can give the container a height and still get it to work?
Fiddle to illustrate: https://jsfiddle.net/Lej1a6vp/
html:
<div class="container">
<img class="image" src="http://via.placeholder.com/300x400" />
<img class="image" src="http://via.placeholder.com/400x300" />
</div>
css:
.container {
display: flex;
margin: 1em auto 3em auto;
width: 500px;
height: 200px;
justify-content: center;
align-items: center;
}
img {
box-shadow: 8px -8px 10px #00000080;
height: 100%;
width: 40%;
margin-left: 1em;
object-fit: contain;
}
If you set the height to auto it will make them the same width but height will be different, if you want them to be the same height and width then you have to use an image with the same aspect-ratio for this to work since it is not possible to make it the same width and height without cropping if aspect ratios are different.
There is a #FutureCSS property called aspect-ratio: 16 / 9; in which you can lock elements to a specific ratio but it's still not available in all browsers;
.container {
display: flex;
margin: 1em auto 3em auto;
width: 500px;
height: auto;
justify-content: center;
align-items: center;
}
img {
box-shadow: 8px -8px 10px #00000080;
height: auto;
width: 50%;
margin-left: 1em;
object-fit: contain;
}
BDB88 provided me with the clue I needed, and thanks for that. My objective is to make a responsive layout that will show the drop shadow around the images and not some ghostly outline that's at a distance, and I want to keep the images' aspect ratios. I also want to mandate a particular height for the container, and not have the images overflow outside of it. My use of "height: 100%;" for the img tag was what was causing the problem. Combining that with the "width: 40%;" was causing conflict because both requirements can't always be satisfied simultaneously. By changing to "max-height: 100%;" and "max-width: 40%;" for the img tag, I'm getting the behavior that I was after. The CSS is now (I made some additional edits to make the behavior more apparent when viewing and scaling the window to simulate larger/smaller screen sizes):
.container {
background: yellow;
display: flex;
margin: 1em auto 3em auto;
width: auto;
height: 200px;
justify-content: center;
align-items: center;
}
img {
box-shadow: 8px -8px 10px #00000080;
max-width: 40%;
max-height: 100%;
margin-left: 1em;
object-fit: contain;
}
Cant get over this problem. I've designed a small container:
The text content inside is absolute. I'm trying to make the text container height responsive with just css no js...
I'd greatly appreciate any help :)
The small rectangle is..
.left-area {
display: inline-block;
background-color: rgb(73, 50, 76);
width: 144px;
height: 29px;
margin-top: 109px;
margin-left: 0px;
position: absolute;
}
The description is..
.app-desc {
position: absolute;
display: inline-block;
width: 78%;
padding: 17px 10px 10px 30px;
border-radius: 5px;
color: #ffffff;
font-size: medium;
}
here's the right area..
.right-area {
display: inline-block;
background-color: rgb(73, 50, 76);
width: 88%;
height: 128px;
margin-top: 10px;
border-radius: 10px 10px 10px 0px;
}
Every element needs to sorta stay where it is.. for example the ratings too..
.app-rating {
position: absolute;
display: inline-block;
margin-left: -10%;
bottom: 0;
text-align: center;
width: 100%;
}
The position: absolute; on the text block container is positioning relative to the parent container but it's then overriding the display: inline-block rule, so the child size attributes won't be considered by the parent, because it is effectively acting alone. If the absolute was removed the parent containers fixed height will also block element from growing the containers height.
Try the following:
remove the absolute rule on the .app-desc container
remove the fixed height on the parent .right-area container and add height: 100%; to ensure the parent container reacts to the child block element
Then add a min-height: to the .right-area so the container doesn't go to short if there isn't enough content in the child
Please see example where I've tried to replicate your scenario: jsfiddle (I wasn't sure where to position the icons/buttons so they may need some tweaking)
Hope this helps, and if you want to know anymore about positioning absolute to relative parents and how they react with block elements then there's loads of documentation and examples on the W3 School site - Position Section
I have a Wordpress promoslider pluggin on the front of my website which is inside it's own div, the css looks like this:
#content.promoslider {
float: left;
margin-left: 16%;
height: 420px;
width: 840px;
background-color: #3397cc;
margin-top: 20px;
margin-bottom: 35px;
border: none;
}
On my laptop it is centred and looks fine but on different sized monitors (mainly wider ones) it isn't in the center. You can see it on my website's homepage http://designbyiliria.com/
Could some one please tell me how I can use #mediascreen to adjust the margin-left depending on which monitor it is viewed on I'm a bit confused.
Many Thanks
Set the margins to auto if you want it to be centered on varying resolutions.
#content.promoslider {
height: 420px;
width: 840px;
background-color: #3397cc;
margin: 20px auto 35px auto;
border: none;
}
Jsfiddle to demonstrate my issue.
I have a SPA (Single Page Application).
In the appliation several dialogs can popup on the screen.
Every popup has it own width and height.
The title and content of the dialogs are added by angularJs
The problem i have here is the size of the dialog.
Currently all popups are made and added seperatly. I want to change this into one popup with variable content. The problem that comes with this is that the popup must wrap the contents width.
Example (as shown in the Jsfiddle)
<div class="dialog">
<div class="titlebar"></div>
<div class="content">
The content that is added has css that tells it has a width of 400px
This means the dialog needs to wrap to this 400px
</div>
</div>
How do i solve this by only using CSS?
Some examples of the variation of popups (although the width of both look the same, this is not the case)
Use display:table for the dialog.
Here is your Updated Fiddle.
For young browser you may use :
1) display:flex; property (includes centering) DEMO
.backdrop {
position: fixed;
top:0;
}
.backdrop {
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.dialog {
margin:auto;
position:relative;
}
2) max-content as value for width and not set any width to inner
content . (exept some padding to keep room for the close button) :
DEMO
Info on W3C about those new keywords value, soon avalaible i hope.
CSS updated
.dialog {
width: max-content;
z-index: 101;
margin: auto;
/* basic way t o center */
top:50%;
left:50%;
margin:-80px -150px;
}
.titlebar {
height: 50px;
line-height: 50px;
background-color: #000000;
border-radius: 10px 10px 0px 0px;
}
.title{
color:#FFFFFF;
font-size: x-large;
padding:0 50px 0 10px;
}
.close_button {
position: absolute;
right: 0px;
top: 0px;
line-height:30px;
padding: 5px;
margin: 5px;
border-radius: 10px;
background-color: #ffd549;
color: #000000;
}
.content {
background-color: #FFFFFF;
}
.content-width {
background-color:#FFF000;
}
or as already said , use the display: table, inline-table
Using display: inline-block; text-align: center;
Works in ie >= 8.
Fiddle.
I don't understand the problem.
If you want to center the content-width div element, simply add margin: auto;.
If you want the container to fit the WIDTH of its content, you must change the display property from block to something else, like inline-block or table (as suggested by #jacelysh).
What is it exactly that you are trying to do?
A div without a set width will take up the width of the parent.
try this.
.content {
background-color: #FFFFFF;
min-width: 100%;
}
.content-width {
width: 100%;
background-color:#FFF000;
}
http://jsfiddle.net/VQA4k/6/
Checking again now. You can just remove the width from those two classes and it will work.
This is what you want I think.
http://jsfiddle.net/VQA4k/16/
I need to make website layout where I have blocks with "regular dimensions" and "2x2 regular size" blocks and they should be arranged nice, not matter where I put bigger and where I put smaller block. For example if I have situation like this at the pic below, I need block 8 to be below to 5, and block 9 would be next to 8 (below block 6) and so on.
picture: http://i.stack.imgur.com/epWJo.png
Here is my CSS so far:
.block
{
float: left;
display: inline-block;
margin: 3px;
width: 141px;
height: 150px;
border-style: solid;
background: lightgray;
border-width: 1px;
}
.block4
{
float: left;
display: inline-block;
margin: 3px;
width: 294px;
height: 308px;
border-style: solid;
background: lightgray;
border-width: 1px;
}
Can you please help me how to make it?
Thank you
Isotope or jQuery Masonary works well for what you want
http://isotope.metafizzy.co/
http://masonry.desandro.com/
Can't be done unless you want to put your 1/4 sized blocks in a container. So that the container is floated to the left then contains 4 of the smaller blocks. Or you could use jQuery Masonry as others have said.