If you have a designer that is not specifically designing a PSD(mockup) around bootstrap column sizes how do you make the two fit ? It seems to me the options are :
1. Generate a Custom bootstrap grid
2. Don't use bootstrap
3. Use a mix of bootstrap and fixed width columns (Yuck? )
I'm sure I'm not the only one who has ever faced this problem . Looking for real world solutions or documentation. Not theories.
thanks
When you have a psd file, the problem that you can encounter is the width of the blocks. The height don't causes problems, but the width ussually do because mabey the psd is not made to work with 12 colums like bootstrap does, but the solution for this case is the nested grid. You keep nesting the elements until you get the right width of your blocks. I didn't recived yet any psd that i could not build it with bootstrap.
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
Hi everyone i am facing a problem with bootstrap and a div element that make weird behaviour once in larger screens.
Here is the goal result i want to achieve :
And here is the result i get when i make the screen bigger :
And finally here is my bootstrap code:
If someone can figure it out why i get such weird behaviour i would take for sure the explanation. Thanks in advance the final result i am trying to achieve is the following one :
The bootstrap grid system offers you to use multiple grid options to different screen sizes,
Use the col-lg-* for bigger screens and it will work for you.
You can read more about the bootstrap grid system
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.
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.
So, here's my situation :
I've built a website using Twitter Bootstrap.
The main design - among others - consists of a left sidebar (span3) and the main content (span9).
Now, I'm trying to fit a 728 x 90 AdSense Leaderboard ad in the span9 block and - guess what - I noticed it's slightly bigger than the available block.
So, I'm thinking about re-sizing the whole griding system (= increasing the grid column width by some pixels).
How should I go about it? What if I go and Customize? Which variable should I edit, so that the alternative CSS remains a drag'n'drop replacement for the existing bootstrap.css?
And, last but not least : will it work without having to tweak 1001 different CSS options?
The three variables below control the gutter (spacing between columns) in the Bootstrap grid. The defaults are shown below (taken out of variables.less. Make these values smaller to make the columns (span*) themselves wider.
#gridGutterWidth: 20px;
#gridGutterWidth1200: 30px;
#gridGutterWidth768: 20px;
The fluid grid calculates it's values from the above variables too:
#fluidGridGutterWidth: percentage(#gridGutterWidth/#gridRowWidth);
#fluidGridGutterWidth1200: percentage(#gridGutterWidth1200/#gridRowWidth1200);
#fluidGridGutterWidth768: percentage(#gridGutterWidth768/#gridRowWidth768);