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
Related
I have a website that I am working on that has a simple widget that shows the current status of certain systems. The problem I am having is that when the view goes to mobile (iPhone size about) or the screen on a browser is creating the same effect, the rows that have objects in them start to stack and become invisible or cut off. I don't want these to ever stack because the design doesn't make sense that way. Is there a way to make is so something will never stack? I can't seem to get any clues as to how to fix this since the bootstrap choices don't go that small. It seems like it would work if there was a col-xxs-* class or a col-mobile-* class.
You can customize twitter media query breakpoints
so the col-xs-* can start from 200px instead of 480px for example.
here is the link:
http://getbootstrap.com/customize/#media-queries-breakpoints
Edit the variables and download that version. you can also use bootstrap Less to edit these variables in your project as it suites you instead of re-downloading the files every time.
I'm not sure if this helps,
Make sure the viewport is configured correctly:
Make sure you don't have content that is wider than the viewport.
For instance if you have an image that is wider than the viewport set the CSS to
max-width:100%;
From what I can understand you don't want to stack the divs one below the other in mobile view. Then try to use class like table-responsive that allows the content to appear with a horizontal scroll bar.
Then you have to set the min-width for those columns that you don't want to wrap.
Or white-space:nowrap
The issue that I was having is there was a custom div class that was put into the hosting software's global styling. This class duplicated the idea of the Bootstrap col classes. It started from col-all-12 to col-all-1. The problem is this would override all the other bootstrap styling and make things a certain size no matter what width the screen is. I appropriately adjusted these and it seems to work. I had to rebuild this code from scratch but now it is good!
Thank you to all those that helped and gave suggestions!
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.
when i designed my website, i made the mistake of going non-responsive (http://getbootstrap.com/examples/non-responsive/) because i didn't know much about it. now, i realize that was a mistake and i'd like to correct it. my main problems are:
i use col-xs all throughout the website.
besides the bootstrap.min.css file, i use a custom CSS file with the following:
for the default CSS, i use:
body {
min-width: 970px;
}
...
which is pretty similar to http://getbootstrap.com/examples/non-responsive/non-responsive.css
and then farther down I have:
#media (min-width: 1200px) {
(some more custom CSS here, mainly font sizes)
}
what's the easiest way for me to convert this website to responsive? i am guessing i might need to edit all the tags and add col-md, col-lg, am i correct?
any help and advice would be greatly appreciated to correct this dummy's big mistake :)
short explanation of the grid-system in bootstrap:
like you already know there are several classes for different viewports.
but you don't need all of them actually:
for example - if you have 3x col-lg-4 and resize your browser under 1170px these boxes won't float, they will break.
if you have 3x col-md-4 and resize browser under 970px these boxes won't float anymore.
col-xs will always float and is always horizontal and will never break.
You also forgot to mention if you want to go full-fluid responsive or breakpoint-responsive what would make a difference in using the .container-classes.
.container-fluid is for full fluid design and .container is for pages with 1170px max width.
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.
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.