there is a greyspace (gap) when I am trying to view the page in mobile/ other size, how do I remove the greyspace? all the images have the same height and width
Make use of Media Queries or Bootstrap-4 supported utitlies like p-md-0 m-sm-0. Bootstrap-4 make use of Mobile-First-Design Approach, work accordingly.
This resource may help https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp
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
Here's the live URL of my web page, however I'm using the latest version of bootstrap. All 'css' is included in 'master.css'. The problem is this box or any other(later on if you fill the form) is not responding to any responsiveness. Tried on mobile as well! What am I missing here?
http://mplanner.esy.es/mplanner/
I've included only bootstrap.min.css and some custom styles at the end in 'master.css'
You added a fixed width to .col-min and to .form-area-inner, .form-planner-inner
Therefore, the "responsive"-width of bootstrap is being replaced by the fixed witdhs.
Removing those fixed-widths will give you back the responsiveness. You can use some media queries if you want to keep the fixed widths on layouts with a certain width.
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'm using Slidebars as extension to create off-canvas menus for my site. Custom width can be set using data-sb-width attribute. I have set it to 370px like this:
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="370px"></div>
On mobile i need to change it to 280px, but I don't know if this is possible with CSS media queries. Help would be needed.
As this is an HTML attribute and not a CSS style, you won't be able to directly use CSS media queries for this.
I see several options to explore:
set the data-sb-width using Javascript or jQuery (before you setup the slide bars)
use two slide bars with different widths, and use media queries to hide one or the other (not quite sure the slide bar script will like that)
give the width as a percentage rather than a fixed width, but that may be difficult to control
I am currently using this template from Bootstrap 3: Bootstrap Dashboard Template
It's using the .container-fluid class, which is making the template fluid/responsive.
My question is - I want to benefit from the full-width template, but I don't want to support the responsive layout.
I wish to achieve this template layout:
How can I do this, without having to deal with the responsive stuff?
The bootstrap documentation has a paragraph to disable responsiveness.
Steps to disable page responsiveness
Omit the viewport <meta> mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this
comes after the default Bootstrap CSS. You can optionally avoid the
!important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device
grid scales to all resolutions.