Height of wrapper profile intro or profile card should be auto adjusting as per content.
[work link][1]
[1]: https://codepen.io/TA0011/full/RwBoPbd
It's because you set .profile-card .profile-details to a fixed height of 250px.
You can archive what you want by simply add a media query:
#media (max-width:768px) {
.profile-card .profile-details {
height:auto
}
}
Answer to your comment: text is overlapping because you also set a absolute max-height for the parent element: .wrapper-profile-intro
As a quick fix you can just add
.wrapper-profile-intro {
max-height:unset
}
to the media query from above.
Tip: try to get rid of all your absolute sizes. They cause much problems, especially if it comes to responsive.
Read into Flex or Grid. They booth have the ability to make divs same size etc. So you don't need to set heights or widths manually to a fixed size.
Example usage of Flex, hope this will help you:
https://jsfiddle.net/jhpL2n5w/
The Best Optimized way is to use Bootstrap.
first include bootstrap in your web head tag.
https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css
then
.container-fluid will the trick for you.
You can take a look at https://www.ntafzal.com/
.container-fluid is used in the first section for 100% width.
Related
Is there any way to set a css property to the screen width?
What I want to achieve is something close to this:
div{width: screen width; }
Or
.divTest{width: screen width; }
Edit 1:
I would like to use the class to exactly size other elements with the current width as i choose with css.
Edit 2:
I don't believe it can be done without scripting of some sort but what do I know.
Edit 3: Final Thoughts
A post about the widow re-sizing script using JavaScript is here in Alex V's answer. You'd just add in the script flavor you want. In my case it'd be setting a class property. However I believe setting visual attributes with JavaScript can be bad practice/undesirable in certain uses.
Try width: 100vw; or as the above comment suggests, width: 100%;.
You may also want to set the meta tag in the HTML if it applies:
<meta name="viewport" content="width=device-width, initial-scale=1">
Edit:
If the <div> isn't fitting 100% of the screen width, perhaps you need to have the default margin/padding reset:
*, :before, :after {
box-sizing: border-box; // habit
margin: 0;
padding: 0;
}
Generally, a div, if it's set to display:block (which is the default in most browsers, I believe) will expand to the full width of it's parent. If you want it to be the full width of the screen, it really depends on the way your page is configured.
If the div is within another element that is only set to width:500px or any other size, the div will only be the width of the parent. But if div's parent is the html body, then it should be the full width of the screen.
I've been smacking my head around on html and css a lot lately, and the best tool I've found to figure out CSS issues like this is Chrome's developer tools. You can actually right-click and "inspect" the div you are looking at. Then you can try out all the different css settings you want and Chrome will show you in real-time what effect those things will have.
Viewport units for CSS
vw, vh
1vw = 1% of viewport width
1vh = 1% of viewport height
Sizing div based on window width
When resolution lovers my background images are collapses. I tried width 100% but not worked. Here is my page and screenshot of problem.
What should I do to prevent this? a CSS2 way?
add the following class to your div id="navigation">
#navigation {
min-width: 1024px;
}
Do you mean stack down when device width is changing,
use css #media query and set diff percentage width to the container.
Do you want to make the website responsive, a better way is to use a grid system to
achieve it. such as bootstrap3 , jquery-mobile etc.
They wrote the media query for you by default. javascript also can trigger responsive
but it's heavier than pure css.
Because your site isn't responsive (Seriously? This is 2014!) You need to give the body a minimum width large enough to accommodate your content:
body {
min-width: 1030px;
}
I have HTML pages with CSS, where I'm using percentage measurements for width, height etc.
The problem is when I resize the window by making it small, at some point of time, the HTML elements overlap.
This is what I want to do:
The elements should have percentage measurements up to a point. But beyond that point, the elements should become fixed and should not reduce in size.
How can I achieve this?
You're looking for min-width.
div{
width:50%; /* Your dynamic width */
min-width:300px; /* The narrowest the element can be */
}
http://jsfiddle.net/ejbSd/
You can use min-width for your elements or use css3 media queries to alter layouts on various widths.
Sounds like you should just be able to use media queries to deal with this. In this case, you'd just put:
#media (max-width: [width you want things to turn fixed]) {
element selector {
position: fixed;
width: [fixedWidth];
}
}
If you don't actually need the fixed, you should do what others have suggested and use min-width rather than bothering to make the query.
I just want to clear out one thing. If I am using "container-fluid" class, it means I can not have something like this in bootstrap.css:
.container-fluid{
width: 1170px;
}
I tried to set in pixels and the responsive nature simply switched off. While setting in % it works. In other words, my question is like this:
How can I set the fixed width of container-fluid? Or was it simply not meant by default by bootstrap developers?
I already read this link:
Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
But simply can not find anything there regarding the responsive nature and fixed width with container-fluid.
setting a px width is making it static, you would have to employ a different technique to make it responsive after that like javascript that is why a % is used.
If you are wanting to make the container not go wider than 1170px use
.container-fluid {
max-width:1170px;
}
max-width will make it so if the users screen is wider than 1170px the container will go only up to 1170px wide. This will make it so the responsive mechanisms will still work.
Of course using .container-fluid as the selector will change how all container-fluid elements act so think about adding a second class to that element and setting the style to it.
html
<div class="container-fluid maxWidth"></div>
css
.maxWidth {
max-width:1170px;
}
If you are wanting the container to be fixed no matter what, that will make the contents inside non-responsive as they would not be able to tell when the screen has changed size as the container would not change size.
I'm using bootstrap and if I use a fixed width and auto margins on container-fluid to center the content it looses the responsiveness.
Is there a way to avoid this? Or the responsive design means there is no fixed width?
HTML
<div class="container-fluid"></div>
CSS
.container-fluid {
width: 960px;
margin: 0px auto;
}
Twitter Bootstrap already have a class to do what you want and his name is "container" he uses fixed widths, but that width is different using media queries rules so it became smaller as the screen get smaller, and when less then 767px that container is 100% of screen size.
Basically, "fluid" and a fixed width are contradictory terms. But there are lots of options. For example, you could set a max-width and min-width instead of just a width. Or your could set a width in ems which still gives the layout some flexibility (especially when combined with % width columns).
Another option is to set your 960px width, but to change that width at different screen sizes with #media queries.
Try to add an id in the div and apply the changes there in order to respect the pre-configured container-fluid class