I'm working on a wordpress template with bootstrap 4 and I'm kinda lost. The container isn't scaling down smaller than 576px and I can't figure out why.
Here's a link to the website:
I really don't know where to begin to look for the mistake I'm making, so any idea would be highly appreciated.
after doing some inspecting it looks like your maxmegamenu doesnt have any media query that accounts for any screen sizes smaller than 600px
Wow.. nvm. I had a min-width:550px on the html-element in CSS. I don't even know why. Removing that fixed the problem.
Related
Ok, so I am supposed to create an image gallery. The way I've envisioned it was for it to have a menu on the left, with the images appearing on the right, when selected from the menu. The menu would feature small thumbnails, and .... yeah, I wanted the site to feature a Responsive Web Design, where it would adjust itself should it be opened on a mobile device, but sadly I feel a tad overwhelmed by that.
What is my best way to approach this? I see some sites mention tips like
-make the mobile version first, and go from there
-be sure that the fonts change size depending on the screen size
And quite frankly, I don't even know how to make sure that my images are in the right size........ can anyone help? PLEASE!
Please check media query on CSS3 : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can set the size of the pictures with this... You can make a simple css rules for desktop and make mobile css rules for mobiles by using
CSS FILE:
// CSS RULES FOR DESKTOP
#media screen and (max-width: 300px) {// CSS RULES FOR MOBILE}
But I recommend you to include 2 css: one desktop and one mobile to be more clear.
Okay, here goes (first time asking a question, so bear with me and let me know if you could use further information.)
As my title says, I'm using Bootstrap to generate a horizontal menu (called 'navbar' in the CSS) and when I make the screen size a little smaller, the content of the navbar furthest to the right starts disappearing or going to the next line. I would appreciate this (and understand) if it were happening when the width gets close to the content, but it's happening when the width is about 750-768px. In some tests, I have seen the content itself completely go poof. Honestly, if someone can even tell me why (and what) is happening I would appreciate it. Heck, it might end up being a great accessibility trick!
What I have discovered so far is a strange little bit of code: #media (min-width: 768px). What's really strange to me is that the Chrome inspector won't even let me alter this thing. That is something I have never seen before. I'll be honest, I'm not too familiar with this formatting property either but my education thus far has not provided enough insight.
Now I'm hoping that this is a problem that someone finds familiar (I've been looking, but no hits) because I'd rather not dump the entire codebase online at this point. If it is necessary, I will comply, but I'm hoping someone can share their own experiences with this problem so I can put down my 'fist of anger'. It's a very angry fist. Trust me.
Shipping is a feature...perhaps the most important feature.
As others have noted above, the behaviour you mention is the Bootstrap default ... you can customise it though.
The CSS media query #media (min-width: 768px) ... sets the viewport or window width at which the nav menu collapses. If you want to change this, one option is to go to http://getbootstrap.com/customize/ , scroll down to the media query breakpoints and set #screen-sm to what ever width you want.
If you go to http://getbootstrap.com/customize/ , scroll to the grid system section you can customise the navbar collapse with #grid-float-breakpoint . Thanks to cvrebert for the correction below
Then go to the bottom of the page and compile and download your customised Bootstrap CSS file.
If you use LESS, you can do something similar as well.
Hope this helps relax the fist of anger ;)
I'm reading some books and trying to create a responsive layout but still don't know how to cope with random windows sizes. I know there's a difference between devices and screen, I just can't figure out why can't control display when resizing the browser window.
It that a structure issue, wrong css code or I'm forgetting something?! I need to add mediaqueries for variable widths ranges?
An example:
I set most sizes for devices (1204px, 768px, etc) works ok, but variable widths seems to act strange. I added then a mediaqueries such #media screen and (max-width: 1100px){ ... } but still I get issues on 720px or 620px etc.
I use display snipets from here.
Thanks for any help!
Silly me, I just found out that my code was messed: I had mediaqueries on wrong order so classes end up being ignored. Please refer to this topic.
Thanks you all!
I've searched all over for the answer to getting the proper column widths for 16 column bootstrap responsive layouts.
I've found posts that suggest this can be done. But it does not work for me.
I've tried the Bootstrap customize page. But it doesn't update the responsive part at all. I end up with span16 widths that are 120%+
I tried using the less files and updating the variables. But, again, I end up with wrong widths – for 1200px+ screens, I end up with a 1600px-wide layout.
Perhaps I could update all the values for each screen size individually. But since it's not just the span widths but also inputs and other widths for each screen size, it really starts to get unruly. Especially since I'm not 100% certain what the widths are supposed to be, especially when you get to smaller screen sizes.
There must be others who've run into this issue. So, maybe I'm just being obtuse.
But any guidance or wisdom on this issue is greatly appreciated.
Much thanks.
It has been taken care of in the soon to come twitter bootstrap 2.1.0.
Im trying to make some sort of liquid-fixed weblayout with CSS. The problem is that the site isn't very big, so when users with big screen resolution visits the site it looks very small and empty.So I need the menubar(which is located in the bottom) and some of the main elements to use some more screen space, when visited with larger screen resolutions. Sort of "scale to fit" can anybody help me out please?
My CSS styling as for now is just made as a fixed weblayout.
Read this: http://www.alistapart.com/articles/responsive-web-design/
and try to avoid using PX for widths, use % more :)
You might find this useful too, if you are looking for a cross-browser method for responsive web designs. It's called Respond.js:
https://github.com/scottjehl/Respond
There are also some good snippets and theory in this article from Smashing Magazine:
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Here is some more information from WebDesignerDepot:
http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/
EDIT: Updated with a nice new anything and everything roundup from WebDesignerDepot