My logo disappears when I horizontally shrink my browser window (so, mobile phone view).
http://zanifesto.com
I set the css to overflow:visible, but it doesn't make a difference.
My goal is to have the narrow (mobile) format be a vertical stacking of header, register/login, and then "Create something new".
Any suggestions?
.gbtr_tools_info {
color:#b39964;
font-size:10px;
text-transform:uppercase;
padding:5px 0;
overflow:visible;
}
Just remove this line in your CSS:
#media only screen and (max-width: 719px)
.gbtr_tools_info {
display: none;
}
change overflow:visible to overflow:auto
try doing
overflow:visible !important
Seems to get overriden by js.
Related
This is the codepen:
https://codepen.io/GummyGod/pen/XZqbKY
That's the query i wrote:
#media screen and (max-width:500px){
.content{
display:flex;
flex-wrap:nowrap;
}
.sidebar {
order:-1;
}
.resume {
width:100%;
order:;
}
}
Basically,at the end of the css file i made a css media query in order to make it responsive at widths from 0 to 500px ,however, when the size is in that range of pixels that weird tag shows up and i can't seem to be able to style it
Try this. Remove width and float:left for sidebar,main classes. Adjust padding for space between sidebar and main class based on your need.
.sidebar, .main {
display: table-cell;
}
I am trying to centre the nav-bar links. But sadly i haven't had much luck so far. I've tried to use navbar-justified but that just throws every thing out of proportion.
here is the code.
I assume you wanted to center everything to the center. The easiest way is to use display: inline-block and then text-align: center on the parent element. Then also reset float to use the default aligment:
See you updated demo: http://www.bootply.com/iu9NOXfmEV
Make the container inline-block to get the width of the content, and align the navbar elements. To get rid of the gap underneath use vertical-align: top.
To avoid changes when collapsed add media query:
#media (min-width: 768px) {
.navbar {
text-align:center;
}
.navbar .container-fluid {
display: inline-block;
vertical-align: top;
}
}
You can see here
I have a fixed top navbar in Twitter Bootstrap 3.
Everything works good until 1350px. After 1350px there becomes a gap between navbar contents. So I want to center my navbar.
I checked answers on this, this and this. None of them worked for me.
This is my fiddle: http://jsfiddle.net/mcqHE/56/
Currently I use Navbar 1.
To try centering navbar, I added Navbar 2 to the fiddle.
Check fiddle in 1500px width.
* Navbar 1 is one line, not centered and has gap.
* Navbar 2 is centered, no gap, but it is two lined.
It seems like the cause is this rule: #media (min-width: 1200px) .container { max-width: 1170px; }
So how can I make navbar centered, and one line if width is bigger than 1350px ?
This is an aswer for your problem:-)
You need to add follow lines to css:
#media screen and (min-width: 1350px) {
.navbar { text-align: center; }
.navbar-header { display: inline-block; float: none !important; }
.navbar-collapse.collapse { display: inline-block !important; }
}
Here is solution on: http://jsfiddle.net/myN2s/ .
Let me know if you solve this.
Everytime when you want to center elements, you need to add text-align:center to the parent element, and display: inline-block to elements which you want to center horizontally. None of these can be floated (this is very important).
This fix wil affect all styles on your page. But I guess it is what you are asking for, there was not enough space to put in on one line.
http://jsfiddle.net/mcqHE/58/
* {
font-size:10px;
}
Although the below answer covered most of it, I noticed the menus are still not in one-line, here are the following change I've made:
1) Yes, it's the width that's creating the two-gaps but the major culprit is the .container. So remove the <div> with the class .container
2) Add this CSS to keep your menu items centered:
.navbar-inner { text-align: center; }
3) Lastly this:
.collapse.navbar-collapse.in{ display: inline-block !important; }
Binds the two <ul> elements together.
Additional:
If you want the heading 'Navbar' to be centered too, you can do:
.navbar-header { float: none; }
Here's the JSFiddle.
And it's effect on a resolution > 1350px.
for navbar 1 add the following css to this div div class="navbar-collapse navbar-part2 collapse
max-width: 1350px;
margin-left: auto;
margin-right: auto;
max width will make sure the nav part wont go wider than 1350px
margin-left:auto and margin-right:auto will center the nav.
I think this is what you're after? if not sorry!
When you smallen your browser to 1000px width then there is a horizontal scrollbar, is there any way to remove this above 1000px? Check my screendump below.
I have tried a clearfix but this didn't help and tried overflow:visible;
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */
Any clean easy way to fix this with css?
#media all and (min-width: 1000px) {
body {
margin:0;
}
.wrapper {
overflow-x: hidden;
}
}
If browser is more then 1000px wide there won't be horizontal scroll.
The only thing that you can do (which still keeps your site accesible), is set the width on which the scrollbar should appear.
You can fix that by setting a minimum width for the body.
Add this to your stylesheet:
body { min-width: 1200px; }
When the browser is resized smaller than 1200px, the scrollbar will appear.
Use the overflow-x property to hide the horizontal scroll bar on div that creates the horizontal scrolling.
For Instance,
Overflow-x:hidden;
EDIT
If you want 1000px where the scroll should not come and it still comes in 1020, the case is that you have a padding/margin applied somewhere that is taking those extra pixels. You need to remove it to get your thing working.
I have decided when my browser is smaller than 1200px, the overflow:hidden; on carousel which is 1000px wide can be used.
Vladislav Stanic pointed me to the right direction, thanks all.
#media all and (max-width: 1200px) {
.carousel {
overflow-x: hidden;
}
}
I truly wouldn't be posting a question if I hadn't already spent hours digging through files and researching. I must really not know what I'm looking for :-|
I want to know how and why divs in a container (or the container itself) can change to 100% width when a responsive design is scaled to iphone dimensions - like the below:
http://demo2.woothemes.com/whitelight/about/
the sidebar sits underneath the main content, then the divs inside stretch to 100%
It's driving me absolutely mad! Any help / direction must appreciated :)
Basic Media query responsive layout example:
Demo: http://jsbin.com/ayojan/1/edit
Resize browser to see effect.
div {
outline:solid black;
}
.content {
width:80%;
float:left;
}
.sidebar {
width:20%;
float:left;
}
#media only screen and (max-width: 767px) {
.sidebar {
width:100%;
float:none;
}
.content {
width:100%;
float:none;
}
}
Key points: inside the media query you unfloat the elements (float:none) and set them to width: 100%;