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.
Related
I'm designing a webpage, and extracted this portion into a fiddle:
https://jsfiddle.net/h703xqbt/16/
I'm not being able to avoid several layers of tags instead of a single line when the screen resizes to a smaller value or when using a movile device.
I'm trying to make it collapse into a single button that shows a dropdown list with all the tags that don't fit the screen.
I'm familiar with media queries such as
#media (max-width: 600px) {
#button1 {
display: none;
}
}
but i'm not sure how to use it for this purpose.
I've seen some webpages that do this but it becomes very difficult to follow them as they have an enormous amount of details, and can't find the fundamentals.
Is this possible using only css? (i'm trying to avoid js and jquery as much as possible, for my own reasons)
Simply give the tabs a width of 100% when the screen size is a certain width :)
#media (max-width: 600px) {
.tab-link {
width: 100%;
}
}
This way, the tabs will stay next to each other on wide screens, and occupy the full width on mobile devices, stacking on top of each other.
You can always change the 600px media query to a smaller / larger width, and give the tabs themselves a width of something like 50% if you would like two tabs next to each other.
I've created a new fiddle showcasing this here.
Hope this helps! :)
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.
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%; }
}
I saw this page http://demo.smartaddons.com/templates/joomla3/sj-joomla3/ and was wondering how to do the same footer, when you decrease the size of the screen, the elements remain on top of one another.
I looked at the source, but did not understand me.
I do not want to use Joomla, I do pure CSS and HTML.
tks
The footer you are talking about mixes several css properties. But the most imporant to get the "responsive effect" are floats and media queries
You will find inforamtion about media queries here and float here
This is called a responsive page.
Using CSS3, you can set limits to the page width. And if the page reaches this limit, the style changes to accommodate the new size. In the example that you showed, there is a limit right where the screen reaches 1200px in widht and another one when it's in 979px and below.
you can set this by declaring this in your CSS:
#media (min-width: 1200px) {
/* Your code here */
}
#media (min-width: 979px) {
/* Your code here */
}
I'm trying to get familiar with responsive, mobile-friendly layouts by redesigning my online portfolio, using the SimpleGrid framework (this one: thisisdallas.github.io/Simple-Grid/) combined with elements of HTML5 boilerplate to help get me started.
Here's what I've got at the moment: http://pftest.comyr.com/grid/
One of the issues I encountered was figuring out how to get the grid columns (specifically, the 3 div columns containing the hexagon shapes) to collapse at the different screen-size "breakpoints" with CSS media queries so that they won't simply overlap each other at smaller screen sizes.
After a fair amount of trial and error mucking about I eventually discovered I could get it to to collapse to two columns for tablet screen-sized devices by applying a class/ID with width: 50% and float: left to a media query of: #media only screen and (max-width: 908px) { } and (hopefully) now it collapses neatly into two columns at roughly that size (at least it does from my brief testing)
The issue I'm having is now is figuring out how to get it get into collapse into a single column for the smaller smartphone screen-sizes (#media (max-width: 22em), #media (max-width: 320px) ect.
I have tried various different properties using the same #workgrid ID I used for the two column breakpoint - but for whatever reason just can't seem to get it work, and unfortunately there is little to no documentation included with the grid framework that might aid me.
The CSS in question is:
#media (max-width: 22em) {
#workgrid {
width: 100%;
float: left;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
}
Which is applied to each of the DIV "col-1-3" classes.
As you can see at the moment it collapses into the two columns and then begins to overlap at any screen size smaller than that. I'm sure it is something relatively simple I'm missing/not seeing and just need a bit of a push in the right direction... :)
The main problem is that you're working with unresponsive units inside the responsive elements of your grid and you're not using max-height and max-width for elements like images.
For example, you have an element class called .shape whose width is 300px, this class is a child of #workgrid whose width is 50%. In a small browser viewport with, for example, a 320px width, your #workgrid width in pixel will be as much 160px while .shape width will be the same, 300px, this causes the content gets out of the space and collapses with other elements space.
Here are two links that maybe help you to understand fluid elements better:
Fluid images
max-width
To fix your grid you should use max-width and max-height instead of width and height in some classes and change some css properties like background-size. Another way to solve it is using responsive units instead of fixed units in sizes. A responsive web needs responsive measures.
Fix that takes time and can be exasperating, so if you want an alternative solution yo can solve your problem changing yor main.css and simplegrid.css this:
#media (max-width: 22em) {
to this:
#media (max-width: 41em) { // If it doesn't work, test a larger number like 44em or something like that
Your grid starts to collapse when the browser viewport is smaller than 656px (656px = 41em for a current font-size of 16px), this grid becomes a single column grid when the browser's viewport width is 22em or less, so changing 22em to 41em we make single column appears before the grid collapses, thus making grid works well.