I have a div that is normally set to take up 20% of the page's width, however, on a page where this 20% is not enough to display its content without overflowing, I would like it to take up the minimum amount of width necessary to fit the content. The content is not necessarily fixed-width, so I cannot simply use min-width with a hardcoded value in pixels.
I'd like to do this with pure CSS, if at all possible.
So, what I would suggest is defining a Breakpoint. So you have to figure out on which point your width is not enough, and use a media query to overwrite CSS rules to fit different situations.
So you could do something like this if your page breaks for smaller screen widths than 720px:
#media screen and (max-width: 720px) {
/* ... */
}
Then you can define a new width or min-width inside of this media query.
Related
I'm trying to create a responsive web site. For that I found a nice looking template and adjusted it according to my needs.
One thing however came up where I couldn't find a solution so far - and that is resizing of images with different dimensions.
Let's say I have an image with a width of 600px and one with a width of 500px.
My screen size is 700px. I want both images to be shown at their native width (600px & 500px).
Now I reduce my screensize to 550px. I want the 600px image to be resized to 550px. No changes to the 500px image because the native width is still smaller than the screen.
Now I reduce the screensize to 400px. Both images should now also be reduced to 400px accordingly.
I've been googling and reading here for hours but could not find an automatic solution for this.
Best thing I found is is setting <img style="width:100%;max-width:xxx px;" where xxx is the original width of the image. But... I'd have to do this manually for each and every image!
Without max-width the image would always be strechted to 100% of the screen size.
As an alternative I found some JavaScript that calculates the original width of the image and could be used to fill out the max-width value.
If someone disables JavaScript (EG by using NoScript browser adddon) the whole thing wouldn't work.
Since I'm printing out my website using Perl I could do the calculation with Perl as well. That would help against disabled JavaScript. But still...
Are there really no better solutions? Do I really have to calculate the max-width for each and every image?
Here's the current work-in-progress: https://www.digioso.org/html5up-striped
The template features an image fit class that basically sets the width to 100% of the container and then I added the same image using width=100%;max-width=400px .
The image fit makes the image always use 100% of the screen which I don't want.
Thanks a lot!
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
check: How do I auto-resize an image to fit a 'div' container?
If you have something like this in your css:
img {
width: 100%;
}
The image tries to assume its actual size and is automatically adjusted accordingly with the container.
If you need to resize the image when your screen gets smaller, you can use #media and define the relative behaviour.
#media (max-width: 700px) {
img {}
}
Basically, I don't want the layout and formatting on my page to become nonsensical if the user resizes the browser to a really small size. After a certain limit, the page should not get any smaller as the user resizes the browser to a smaller size. The page should stay the same size and any overflow should be hidden or use scrollbars or whatever. I tried setting min-height on the body but this had no effect at all.
btw, I am already using media queries and they're nice but don't do what my boss wants.
The only think I could think of was to make some sort of element with a fixed size and that would prevent the page from getting smaller than that element.
This is where a media query and CSS will come in handy! (Assuming you already know how to use CSS)
The media query allows you to change the styling of an HTML page based on the size of the screen by using CSS (if you know any CSS).
Use it like so (but place this below all of your CSS code):
#media only screen and (max-width:480px){
//The elements you want to change here
}
As an example, any CSS code you place in this query will apply to your page if the screen width is less than 480 pixels. You could also use min-width, max-height, and min-height for this too.
Example scenario:
div {
width:600px;
height:400px;
}
#media only screen and (max-width:600px){
div {
width:100%;
height:50%;
}
}
In a case like this, if the user is in a browser window or phone with a width of less than 600 pixels, the div will take up half of the screen.
So, instead of trying to prevent things from getting smaller, make them bigger on smaller screens and windows.
There is a more in-depth article here.
Code: https://jsfiddle.net/qo44rgop/
I want the table to move the td's to the next line if the screen becomes to small (now it extends the table beyond the width of the div). I tried to use margin: auto on the table, it centered it on the div but it didn't adapt to the screen size.
One thing you might want to consider is changing the display property of to 'block' under certain size restrictions. Example:
#media (max-width: 600px){
td{
display:block
}
}
I think you should use #media and set the width of the table cells to 100% (or change the display property) when the screen width fits with your concept of small (I think 768px was the normal max-width for mobile devices, don't remember now).
You have an example in the link I gave, at the bottom.
I want to use media queries to make a responsive website. I have some pages with 2 columns, others with 3 or 4.
For example I have two columns: #colA and #colB. #colA has width 600px, #colB has 360px with a wrapper of 960px width.
I want to use media queries so that if the wrapper has less than 960px, the columns will keep the width proportions between them (which should turn #colA's 600px to 62.5% and #colB's 360px to 37.5% widths..
Is there a way to do this with html/css? If not what are the other (easiest/lightest) options to use with media query?
<div id="colA" width="600px">content1</div>
<div id="colB" width="360px">content2</div>
to convert in
<div id="colA" width="62.5%">content1</div>
<div id="colB" width="37.5%">content2</div>
Using css/html?
Edit1: Yes it is a CMS. The user sets the width values in px by dragging some sliders in the control panel. I need to make the template responsive, so when the wrapper's width is less then 960px, the columns will still keep their width proportions between them.
I think the easiest way to do it is right in your problem statement. Just use the percentage.
#colA {
width: 62.5%;
}
and so on...
Your media query should look something like this, just make sure this code sits beneath the previously assigned styles for #colA and #colB
#media screen and (max-width: 959px) {
#colA{ width:62.5%; }
#colB{ width:37.5%; }
}
My page uses the .css position:absolute; and percentage height attributes, eg. height 80%; . It looks great when its full screen but it look terrible when its minimized. When its minimized I would like to get a scrollbar. Is there someway to have an element be 80% width of the screen when the screen is maximized, but if the screen is resized, then maintain the initial size and get a scrollbar.
Perhaps using the min-height attribute will help? This should prevent the 80% height from shrinking indefinitely and allow you to specify an overflow attribute to get the scrollbars.