I am looking for a layout that I saw some time ago but I forgot to bookmark. It had 3 main columns but, when resizing, it changed to 2 and the 3rd one fell down to the next row. It was NOT the normal layout resizing with overflow.
When resizing, the 3 cols actually stayed the same width until reaching some limit, at 33% of width each one but incrementing the height. The only thing that apparently changed was the text size. Then, at some point in resizing, one of the 3 ones fell down to the next row, making the 2 on the top to resize to fill the whole width (50% and 50%) and the one on the bottom to fill up the 100% of the new row. I tried googling a lot, but since I'm not native I cannot seem to find the precise terms to find it. I know it worked perfectly in the demo and was only with CSS and HTML.
EDIT, the container of the 3 of them stayed with the same width the whole time.
Media queries sound like they may be what you're after. You can specify different styles depending on the width of the browser window. It could certainly be used to achieve what you're after.
eg. Say you wanted to target devices that greater than 900px wide, you could use:
#media screen and (min-width: 900px) {
.class {
background: #666;
}
}
You can find more information on media queries here
Related
I have a CSS progress tracker at the top of my shopping cart. It's a div with an unordered list inside.
See live view here: http://wordpress-15765-54444-143522.cloudwaysapps.com/shopping-cart/
The space between each step of the progress tracker shrinks down with the screen size. But once the screen hits 768px the tracker breaks onto the next line, even though there is still room between each step to shrink down further.
I want the whole tracker (all items) to break down together onto the next line eventually, but how can I stop it happening so soon? I need each step to shrink together further before that happens.
See a live screencast here explaining the problem: http://screencast.com/t/nNgDguPEYevc
I've tried changing media queries, min/max widths, and different display values, but nothing works.
Had a bit of a look at your css behind your progress bar and i think i may have spotted the issue.
I shrunk the screen down to around 767px so that it was just under the 768px you mentioned. The progress tracker is fine when it's still being viewed at 768px it is once it goes below that is when it actually drops down.
The reason for this is because one of your media queries sets the containing div of your progress bar to a width of 100%:
<div class="x-column x-sm x-3-4">
...
</div>
The media query that is proving the culprit:
#media (max-width: 767px)
.x-column.x-sm {
float: none;
width: 100%;
margin-right: 0;
}
This media query is smaller screen sizes but is what is causing it to drop when you get even 1px smaller that the 768px screen size because even though to the naked eye it seems as though there is space - technically there is not because the width of that div is now full-width of the viewport.
NB: would've added this as a comment since it is not really answering your question more helping point you in the right direction however I lack the required rep to do so :)
I have been teaching myself front end web development for a while now and have taken on several client projects with good success so far. I am currently working on the site www.thrivetech.com and having an issue. There are 3 text columns with images above each on the home page of this site, and I cannot come up with a good way to make them all stay the same height. At different screen widths these 3 columns change height and sometimes don't match. Squarespace objects are natively responsive, and when the screen gets small enough these 3 columns stack on eachother and look fine. I have added a lot of Custom CSS to change background colors, text colors, etc. but can't figure out how to make this work. Even if I remove ALL CSS and just have a plain white page with black text, these columns still do this and don't stay the same height. I have even contacted Squarespace support and they haven't come up with a solution. See image below:
I would include some CSS source, but it's best to navigate to the site at thrivetech.com and inspect the CSS to see what is going on. I have considered doing something like using JS and jQuery to get the height of all 3 of these, determine which is the greatest, then set the height of all 3 to the greatest height, but it seems like there should be an easier, more elegant pure CSS solution?? Thanks for looking!
RESOLVED:
I fixed the issue by using a media query to set the parent element of these 3 columns to display: flex; when the window is at least 640px wide. The reason I need the media query is because they need to display as blocks when the window gets smaller so we can take advantage of Squarespace's native responsive design so the columns will stack on top of eachother on mobile and smaller screens. Here's some simple pseudocode:
#media only screen and (min-width: 640px) {
#parentDiv { display: flex; }
}
I have a website that I made (without bootstrap or any or that stuff, and I am having an issue trying to scale everything down for people with a smaller screen resolution. basically I'll want it to detect the size, and apply appropriate CSS classes to elements to scale everything down if under a specific width. Right now I am just trying to build the CSS classes, and I am having some difficulties. The closest I've gotten is shrinking all the content down using:
transform: scale(.75);
That works awesome on the actual content for resizing, but I'm left with a large padded field around the content. a bit hard to explain, but what I want is for the content to shrink, but the divs to still be 100% of the browser (so if there is a smaller browser it fits nicely without this stupid large padded area around the content)
Here is how it normally looks:
image!
and here is how it looks with the added CSS transform:image2!
Any ideas for how to overcome this would be greatly appreciated, Also note I really don't care about my solution not working in IE9 or lower!
The basic output that I want is the equivelent of shrinking the browser zoom to 75% if that helps..
Depending on how your CSS is written, something as simple as this could work:
#media only screen and (max-width: 600px) {
body {font-size: 85%;}
}
If you have divs with em widths that will shrink their width, but you could change that via the media query above, perhaps setting their widths to 100% etc.
This is a follow-up question to one I asked before:
"CSS - elements position when the window size changes".
The issue was - How to avoid the elements from being pushed aside when the screen gets smaller.
The answer was - use static width.
Static width indeed solves the problem, however it causes another problem (now we get to my follow-up question):
Let's say I use a picture as a background for the headline of the site and another one for the footer.
On the one hand I want them to always take the whole screen width but on the other hand I don't want them to be pushed aside when the window displaying the site gets smaller.
Using static width will cause different display in different browsers or in different versions of the same browser - will not always take the whole width. (there isn't one static width value that is good for all cases)
Using width: 100% seems to be the solution but then I find myself where I began.
How can I accomplish both?
Thanks.
This is the reason that we have css media queries and max-width, max-height attributes
Media queries allow you to change the css depending on how big the screen size is. Plus they can do a lot more.
http://www.w3schools.com/css/css_mediatypes.asp
What I would do is design your site with max-width: someamount, and width: 100%. Once your finished, then worry about making it look better on smaller screens.
Designers usually go one of two ways when designing a responsive website. Either design for desktop size screen first, then adjust for the smaller sized screens towards the very end. OR design for mobile sized screens first and then the larger screens towards the very end.
I have created my website as a fixed layout, with a width of 1600px,
but the webpage on a smaller resolution looks too big.
What am I supposed to do to make it looks good in every resolution?
Thanks for help
Use relative measures, like width: 100%. You can constrain this even more by using min-width and max-width.
Apart from that, you can use CSS media queries to make styles that only apply if certain conditions are met, like a minimum or maximum width. If you use that, you can change the whole look and feel of your website, for instance by hiding parts on smaller devices or change from a 2 column to a 1 column text presentation on smaller devices.
A percentage-based width would change the width depending on the screen size, but you should also use min-width to ensure the page doesn't become too thin that it ruins your content.
Your options:
Use a narrower fixed width. Staying under 1,000 pixels is fairly safe though not perfect
Use percentages for page width instead, though this is difficult if you need to have a set width for child elements to look right
Do a combination of the above and use media queries in your CSS to make your site responsive. It'll fit every screen width you specify AND you'll have full control over your layout at each trigger point.
Here is a great resource for learning about responsive sites - this is the way to build a modern website, so though it might seem confusing it's worth every minute you spend on it.
http://bradfrost.github.com/this-is-responsive/resources.html
Good luck.