I have question, how I can create layout which, which column set differently for different screen sizes
I have example:
http://jarock.pl/rock/assassins-creed-iv-black-flag-lets-play/
When you change size for small left column will move down.
You need media queries.
#media (min-width: 700px) { ... }
Related
Which is the better way to create a responsive website among grid, media queries, and HTML tables.
often neglected by developers when it comes to responsive websites: Typography.
Typography!
#media (min-width: 640px) { body {font-size:1rem;} }
#media (min-width:960px) { body {font-size:1.2rem;} }
#media (min-width:1100px) { body {font-size:1.5rem;} }
There are lots of ways to create a responsive behavior in css, you gave some good examples for them.
Personally, I'm using the Flexbox and Grid display methods to align html containers and contents, and by using Media Queries i can make them interact responsively for any device.
For example, if you wanna render a cards-based container, meaning there will be multiple div elements with their own contents, aligned in a straight line, i would use the flex-wrap property to break them instead of overflowing to one of the page sides. If the cards are getting small enough for the page, i'd use the vw value for my card's width at a certain page width, using media queries.
Of course you can have your own preferences for different responsive methods, and there are a lot you can search on the internet, i just gave some of my own.
Use media queries and flex,
Some example breakpoints,
// Extra large devices (large desktops, 1200px and down)
#media (max-width: 1200px) { ... }
// Large devices (desktops, 992px and down)
#media (max-width: 992px) { ... }
// Medium devices (tablets, 768px and down)
#media (max-width: 768px) { ... }
// Small devices (landscape phones, 576px and down)
#media (max-width: 576px) { ... }
I want to make a website where I'm using an "accordian" as my design for big screen devices (>750px) and I want to use a different design (Normal Buttons) for small devices.
I have studied how to apply diff css design for different screen size but don't know what to do if even my html content is different.
Can anyone please help me with how my html syntax should be for these two different contents ?
If you want different html what you can do is make 2 parts of content that are basicly the same but
#media screen and (min-width: 750px){
.smallClass{
display:none;
{
.bigClass{
display:block;
{
}
That way it switches between the blocks depending on your screen width
You can use media queries to adjust CSS rules to different screen sizes.
This is an example with a class named "testClass"
#media screen and (max-width: 650px){
.testClass{
color: blue;
{
}
All,
I am trying to develop a responsive site, but for some reason the media query I use for the ipad/tablet is also effecting the iphone/mobile. Are my dimensions wrong?
What is the best way to target all three device types?
Thanks
/desktop/
#media (min-width:1100px)
/ipad/
#media screen and (max-width: 1115px)
/iphone/
#media screen and (max-width: 767px)
This is a common problem in responsive design and there are many approaches that try to solve it. I myself find a 4-breakpoint layout to be the most fitting for most of the situations.
Phone: default
Phone-Landscape: min-width 480px;
Tablet: min-width 768px
Tablet-Landscape: min-width 1024px
Desktop: min-width 1260px
Think of min-width as meaning greater than or equal to and think of max-width as meaning less than or equal to.
By that logic your iPad rules (less than or equal than 1115px) are also going to affect the iPhone since it's screen is less than 1115px.
It sounds like you want to use an AND on your ipad rule to make it only affect rules that are bigger than your iphone rule set. Something like:
#media screen and (max-width: 1115px) and (min-width: 768px)
See https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries for more information
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 have a Python program that uses mod_python to retrieve database entries from MySQL and display them in an HTML format. This webpage ends up as a table with four columns, that span the entire page. (I formatted it with CSS)
Is it possible to use CSS to change the number of colums if the screen width is under a certain number of pixels? One of these four columns have a large amount of info in it, and it is not idea for viewing it on a mobile screen. The text appears small and hard to read, and zooming in is not convenient either. I want to know, is it possible to use css or something else to remove this column if the screen size is smaller than say, 800px? So on an iPhone 3g, the table would show with only three columns instead of four on a larger screen. This would make the text easier to read on the go.
Yes, it is, and quite easily. You can do it using media queries:
#media screen and (max-width: 800px) { your styles here }
So in your case, your css would have the style for the column, something like .column4 {display:block;}, and after that your media query:
#media screen and (max-width: 800px) {
.column4 {
display:none;
}
}
You can have different queries for different screen sizes (in my latest project I used 6 different layouts, for 6 different resolutions and devices). Add some percentages to that and you can have a really nice responsive site.