For whole site there is very easy with Bootstrap3 instructions
But what if I had a small container, e.g. 400px and need to turn off responsiveness inside this container? I need fully functional Dropdown in my navbar, but when responsive is on, dropdowns in small containers are not like "popups", they opens inside navbar and stretch them out.
Also, I can't compile my own bootstrap version without responsive styles, because I need to use CDN (cdnjs).
If I understood your question/problem properly, then define .container class as below in custom stylesheet. (assume that you wish to ha max width of 400px screen. change it accordingly.)
#media screen and (min-width:401px) {
.container {
max-width:400px;
}
}
And then use col-xs-xx - (xx is column number) classes only.
Related
My logo has a normal size on the screen like this
and if I change the screen-size of the browser then my logo gets very small.
The logo mustn't have a small size like in the previous pictures. It should be more like in the next picture:
I know there a lots of different themes but is it possible to keep the logo big by smallering the screen?
Most WP themes have pre-set media queries that provide breakpoints to make the site responsive to screen size changes.
You can override these with custom CSS, but I'd find the breakpoint first. Use this tool and then add something like the following to your CSS:
#media screen and (max-width: 400px){
.logo{
width:200px !important;
}
}
This changes the width of the logo when the screen size is 400px or smaller. Change 400px to whatever value the breakpoint is set at. You can edit width or height this way, but there's no need to do both unless you want to.
Edit: ".logo" in the CSS above should be changed to whatever the logo's class is.
I am assuming you are using a theme and did not build this from scratch. Chances are your theme has a responsive image declaration, such as:
.someAwesomeDivName img {
width:100%;
height:auto;
}
and the parent div holding that image is a certain width, which effects the image inside it. Check there first, and go from there.
I have two category blog layout pages on my guitar website. The intro article images are set to "float: left" which makes the design work on devices with either really small screens or if they have larger screens/flipped screens to horizontal mode.
In vertical mode, on large phone screens, the text wraps around the image in an odd way. Here I would prefer if the text simply just skipped to below the image. You can see what I mean here.
The first example is the effect that I'm after, but on iPhone 6 and nexus phones the wrap effect is unwanted.
Is there any way to make this happen using CSS?
I have tried usin the min-width CSS property but it does not have any effect.
Using Joomla vs 3.6.5, protostar template.
I found two solutions:
.pull-left.item-image {
float: none; /* option one */
width: 100%; /* option two */
}
Only float or only width (or both) will solve your problem. But, please note this will affect the image, not only in the mobile view. So you need to play around with the window's width and see what's the maximum height for the change. then, use #media on CSS (lets say you want it to apply for every screen that is thinner than 450px:
#media screen and (max-width: 450px) {
.pull-left.item-image { ... }
}
I'm trying to make my Wordpress nav truly responsive. It's responsive in the sense that once it hits 767px, it switches to a mobile friendly nav, all good.
What I'd like to do though, is make it so that for any screen size between 767px and infinity, it scales up and down to fit appropriately.
Currently, I am managing it by using media query breakpoints, and adjusting the font size and anchor padding.
I've also tried various nav plugins, and they don't seem to do handle this the way I want either.
Is there a way to set some CSS attributes as a percentage, so that as I slowly change the width of the browser, it dynamically adjusts the nav so that it takes up the full width of the nav bar but doesn't wrap onto two lines??
www.thecyclery.net.au
Thanks!
Jon
You can use flexbox to layout your nav.
the key i found was adding flex-grow to your list item.
.flex-item {
flex-grow:1;
}
You will have to tailor your current css to suit. And by that i mean you might have to remove some of your styling from your links and add them to the li instead.
my example:
http://codepen.io/partypete25/pen/YWwXXY
learn more here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have a page in Bootstrap but I want the .container to be wider. Can I change the width of this .container?
There are several possibilities:
custom css
As it has already been suggested, you can just overwrite the default in your own css. Keep in mind, that you'll probably have to use media queries define several of these for different screen sizes
customizing bootstrap
On bootstrap's own customization page you can change practically any definition and generate a customized version of bootstrap. Look for the section called Container sizes
fluid container
If you just want a container that spans the entire width of your screen, use .container-fluid instead of .container
<div class="container-fluid">
...
</div>
You can easily override the default presentation of Bootstrap, just include your own CSS file, and do the following:
.container {
/* Write your custom width here! */
}
I do want my website to stay responsive, the sidebar should still go under the content when the screen is too small, but there's a few span* classes I'm using that I don't want going to 100% width when the screen is too small. Is there a way I can still use the span* class (it's a really easy way to position things) but explicitly say that they should not be responsive; either on the container, or row, or each span, whatever works.
a bit short for explanation, code is missing.
have you tried using selector: span[class*="span"]{} to filter the class you want ?
I don't think you can have it both ways.
Either your bootstrap grid is responsive or it isn't.
This is because all bootstrap knows is whether or not the responsive initialization snippet has been called. If it has, then it changes the spans to make them responsive.
If you want a way around this, I would copy the styles from the span class that you want applied to your unresponsive sections and then make a new class with those styles.
So, if you wanted to make an additional unresponsive .span3 you could just copy the relevant styles and make your own classes. You would need to set the width, float, and margins. In this case width: 220px;, float: left; , and add a .margin-right: 20px;. The widths can be found in bootstrap.css file.
I also attached a fiddle for reference -- http://jsfiddle.net/c86kE/