I have to make a checkerboard homepage with several div's containing pictures and text.
I made something like this :
In the CSS, all blocks are placed with an absolute position and some top, left properties (in px).
The design is correct, but I want to make all this responsive, but in 2 different ways :
1 - Adapt all the body to the screen and eventually increase the font-size property.
2 - Simply align all the blocks in two or one column(s) (for smartphones for example)
I don't want an answer with a ready-made code, just help to realize the responsive version of my homepage.
You should really look into using a CSS framework rather than relying on absolute positioning, which is difficult to adapt for use with multiple screen sizes and make responsive.
Although there is a learning curve when first attempting to use a CSS framework, it quickly pays dividends, especially when taking into account cross-browser and responsive-design considerations.
Probably the most popular CSS framework is Bootstrap, which is responsive by default, and would make producing your layout relatively simple.
Another good option for a CSS framework is Foundation.
There are countless others. Here's a list: http://usablica.github.io/front-end-frameworks/compare.html
I used to realize the responsive with the float columns and change the columns' width through media query. But in your job, you should change the hope wrapper's width and reset the columns' left and top through js. You can consult the plugin 'Masonry', which may help you.
Related
I made a Navigation bar in the header and have added media queries for mobile devices and table but any thing in middle of this makes the page layout look bad so do i need to add more media queries for all measurements or is there an other way of making page more responsive.
I tried doing it with media queries but was wondering if their is another way around.
You can use libraries like Bootstrap or Tailwind and its easy to learn and use,
or you can just use flexbox or grids in CSS.
Learn more about Flexbox on MDN, using this link.
Learn more about the CSS Grid Layout system on MDN, using this link.
you can use your same media queries but make sure that your sizes are in
em
or
%
in this case everything will go smaller and bigger according to the user's device width.
that's in case you don't want to use a css library which is also recommended.
First, lets keep all simple, is not required to use libraries to build a responsive views
You need to implement mobile first, implement mobile then you can adjust only required elements to other break points (tablet, desktop, ...)
Here you can use break points, flex, grid and positions
Manage all spaces (margins, paddings) with parent container to make less changes, here you can take advantage of flex and grid to centered and spaces between elements the trick is property gap, in this days is not required to use tables to adjust elements
If you are building components dont forget, all components should be reusable, configurable and mantenible
Here is some interesting content:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Everytime i work on a responsive design I wonder why all media queries are fixed on the screens width/height. Why not the width/height of an element? Is this possible?
When making reusable html elements in a somewhat modular way, it seems logical to 'scale/design' it relative to it's own width and not the screens width. This way you only have to design the HTML/CSS once and you can use it in different sections of your page without needing to add extra media queries.
Obviously there are workarounds, but is there a css-only way to add css rules depending on it's own or parents width/height?
Regards,
Pedro
ContainerQueries A.K.A. ElementQueries are still waiting to be implemented natively in CSS. I think this is very sad, but it doesn't look like that it does any progress for years now.
Do you still need media queries to make website responsive when you have already used flex box? Are there any instances where media queries give us better control?
Yes there are a lot of things where you would still use media-queries.
You would probably want to switch from flex-basis: 200px; to a more flexible flex-basis: 50%; width on mobiles.
A combination of both is probably best.
If you are working with percentages and wan't a different column count on smaller devices there is imho no way around media queries.
Flex-box and Grid Layout, along with Multi-column layout are responsive by default. These specifications were written in a world where responsive design and supporting multiple devices was already a thing. This means that they include a lot of common sense functionality, which enables responsive design without us needing to do much.
If we want to change the size or proportions of some columns, we have to add a break-point using a Media Query and redefine them. We have no other options when working in percentages, as they will always be the same percentage of the container they are in, whether that container is wide or narrow.
FlexBox is one thing.
Responsive Web Desing (RWD) is something different.
FlexBox is a native CSS set of properties allowing you to apply some specific layout-related styles to your parent and child elements.
RWD is an approach of adjusting the site to fit every screen size. In order to achieve this, you use #MediaQueries.
Flexbox is not a replacement for mediaQueries. Magic happens when you use them together.
Imagine a situation where you want to replace an img scr in the "background" css property when user's screen size goes below 768px. How would You do that with Flexbox but without #Media rules ?
MediaQueries are really powerful and give you a lot of possibilities to control different layouts on your site based on the screen width.
I mobilizing a website and would like to know if I can use one or more rather simple css rules to shrink a main div that has many nested divs and still have everything look proportonate in the smaller screen. The page is... http://www.junkyardzombiez.com/choose-a-zombie/ and the container is Any help is appreciated.
There is no magical way to to do as it's something that needs to be built into the site initially. If you had written the CSS to use % rather than PX then you would have more scope to work with but hard coded PX values mean it's built to stay at that size.
As it stands at the moment, you will need to change a number of classes to scale in width based on screen size.
It's worth looking at some frameworks like bootstrap that can help with this.
I'm not even talking about mobile (just yet), I set widths and heights that are based on the pixel count of my laptop's display, but on my desktop 22" monitor, everything's out of place, div lines are too short (larger display, so it makes sense), etc.
I'm thinking I should use strictly percents, so instead of "width:200px", it'd be "width:64%", would that be a good solution?
Also, I see some websites, they adjust the content when you shrink the browser window (looks like an effect of "margin:0 auto", just keeping things centered), but also, when the width gets small enough, it just stops adjusting, it stops because moving any more and the content will start moving to lines below it in order to fit... How can I get this same effect?
Thanks!
This is done by making your site "responsive" which basically means that you use a grid system that scales and the screen size changes.
There are a couple of frameworks out there that help with this. My favorite is Foundation (http://foundation.zurb.com/) but there are others like bootstrap (http://getbootstrap.com/)
There is a ton of documentation on these sites you should focus on the grid sections:
http://foundation.zurb.com/docs/components/grid.html
Hope that helps.
There are websites using the responsive layout. Means you have orientations/everything fixed for the mobile screens, tablets as well as full size pc/laptop screens.
They make use of a grid system.
Common ones are
Twitter Bootstrap (Two different versions having different UI and
approaches are available at http://getbootstrap.com/2.3.2/ and
http://getbootstrap.com/) This one's my favourite as its too easy to
use
Zurb Foundation
Skeleton
html5 Boilerplate
Sprout Core
Less Framework
You may pick any one you like. They all provide a basic css and javascript to handle things out nicely, a wireframe of a complete website is provided and an extremely well documented manual is available on their websites. Its actually fun and makes work faster.
Cheers!
One useful and recommanded unit is the viewport percentage length that will adjust accordingly.
for example to get a div the size of the window and another div on top of the first one:
<div id='one-page'></div>
<div id='inside'></div>
#one-page{
width:100vw;
height:100vh;
background:red;
position:relative;
}
#inside{
width:10vw;
height:10vh;
background:black;
position:absolute;
top:10vh;
left:20vw;
}
http://jsfiddle.net/xv7Yf/