I'm trying to get the menu bar of an example on the tb website to be a constant height throughout and I ran into a bit of odd behavior.
In the following demo:
http://twitter.github.com/bootstrap/examples/fluid.html
If you resize your browser to about 1070/1080 px width, the bar jumps to an ugly height and then back down. It's as if there's a media query somewhere in the responsive css that hasn't accounted for a ~2px range in browser width. I'm using this as a baseline for my application and would absolutely appreciate any suggestions on how to get this fixed.
The issue comes from some page specific style (from fluid.html):
#media (max-width: 980px) {
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}
vs some external CSS (from bootstrap-responsive.css):
#media (max-width: 979px) {
.nav-collapse .nav {
float: none;
margin: 0 0 10px;
}
}
As you can see, there is a 1px difference between those media-queries. If you were to edit the first to also use 979px, things would not jump any more.
There's a spot in there where .navbar-text.pull-right goes to {float: none} before .nav-collapse goes to {height: 0}. I'd look for that.
UPDATE: It's in the page styles:
#media (max-width: 980px) {
/* Enable use of floated navbar text */
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}
Related
sorry for the title...but I have an issue with the alignment of the main menu when the website come from responsive to pc view. (for example it happen when you rotate your tablet from portrait to landscape, or simply you enlarge your browser window from 600pixel wide to 1300px... ).
To understand what I mean just do this (just look at the main menu):
open my website: http://www.piedicosta.com/joomla3/en
reduce browser windows at 500/600 pixel wide, to let the css transform the website in responsive.
open a submenu by clicking on the down arrow at right. Leave the sub menu open.
now enlarge the browser window to let the css transform the website in pc view.
Can you see that the main menu, now float at left?
If you refresh the page, than the main menu comes at center.
This issue happen only if you leave (from responsive view) a submenu item open. If you don't touch the menu in responsive view nothing happen and everything seems working fine.
Is there a simple reason of this issue?
Thank you for your help!
Your problem lies in your responsive.css?reload file.
On line 25:
#tm:checked + .main-menu {
/*display: inline-block;*/
display: block;<-- this guy is the problem-->
}
Change it to:
#tm:checked + .main-menu {
display: inline-block;
}
You can fix for your next problem via CSS media queries. Now to be honest I am not sure which file you should edit, i think it should be responsive.css?reload. Note: Add CSS media code after
#media (min-width: 1024px) {
ul.main-menu li a {
padding: 27px 10px 10px;
}
}
#media (min-width: 1300px) {
ul.main-menu li a {
padding: 13px 17px 10px;
}
}
/*Add code below HERE!!*/
Copy all the code below to your file:
/*
* - Mobile
*----------------------------------------------------------------------------
*/
#media only screen and (max-width: 800px) {/* Serve big tablet layout and tablet menu kindle's and hi-res devices ( portrait ) */
#tm:checked + .main-menu {
display: inline-block;
min-width: 100%;
}
#toggle-menu .drop-icon, #menu li label.drop-icon {
left: 0;
position: absolute;
top: 0;
}
}
#media only screen and (max-width: 768px) {/* Tablets layout*/
#tm:checked + .main-menu {
display: inline-block;
min-width: 100%;
}
#toggle-menu .drop-icon, #menu li label.drop-icon {
left: 0;
position: absolute;
top: 0;
}
}
#media only screen and (max-width: 400px) {/* Small mobile devices */
#tm:checked + .main-menu {
display: inline-block;
min-width: 100%;
}
#toggle-menu .drop-icon, #menu li label.drop-icon {
left: 0;
position: absolute;
top: 0;
}
}
P.S. I think that your current menu configuration can't support what are you asking (didnt't figure out how to make your text align to left without messing something up, but maybe I am wrong) i did however make your arrow dropdown shifted to the right.
JS FIDDLE
This is my page, when you make the browser width less than 960 px
The first gird box will be diappeared on Firefox,
But it still shows on Chrome.
How to make it has the same behavior on both Chrome and Firefox
Css
.container {
.categorysection {
margin: 0 auto;
max-width:960px;
&.grey {
background: #eee;
}
}
.grid-col {
text-align: center;
display: block;
float: left;
margin: 8px 6px;
}
}
#media screen and (max-width: 960px) {
.grid-col {
float: none !important;
}
}
The problem is that page title that says "finance". That title is floating left, and pushing the first block off screen.
You can either remove the floating from it, or clear the floating flow from the columns:
#media screen and (max-width: 960px) {
.grid-col {
float: none !important;
clear: both;
}
}
Looks like the float:left on the header (.container h3.heading) is breaking it. Remove it and it will work but you'll have to add a "row" class on the h3.
here my website I´m working on: http://www.whatsahoy.com/
My problem: I want the input field next to the button. If I add a float left, it goes next to each other but with a weird <br>. And then the whole thing is also on the left. I want it to be in the middle.
Can somebody help me please?! Thank you very much!
Barbara
To provide you with the best solution, it would be helpful to see the source code of your form. The <br> is probably in there somewhere. However, here is my reply based on what I can see. If it does not help, I suggest you update your question.
Adding the following styles to your custom CSS will put the field and button next to eachother until screen width of 767px.
.wpcf7-form p {
display: inline-block;
width: 470px;
max-width: 95%;
}
.wpcf7-form p br {
display: none;
}
If you would like them next to eachother on smaller screens, you could change the width of the frame. This changes on 767px as set by your theme. I'm not sure this will not have an undesired effect elsewhere on your site, but you could try.
#media only screen and ( max-width: 767px ) {
.et_pb_row {
width: 600px;
}
}
However, it then will be crippled on screens as from 600px. It may be better to make the text field smaller then...
#media only screen and ( max-width: 600px ) {
.wpcf7 input {
max-width: 50%;
}
}
You might want to fine tune this a bit, but I hope you get the idea.
GL!
.wpcf7-form-control-wrap {
display: inline-block !important;
margin: -8px;
}
form.wpcf7-form.init.mailchimp-ext-0\.5\.55 {
display: flex !important;
justify-content: center !important;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit {
border-radius:0px !important;
width: 30%;
}
#media only screen and (min-width: 50px) and (max-width: 600px) {
div#wpcf7-f698-p10-o1 {
width: 130%;
}
#media only screen and (min-width: 50px) and (max-width: 600px) {
input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
width: 235px;
}
form.wpcf7-form.init.mailchimp-ext-0\.5\.55 {
display: flex !important;
padding-right: 70px;
}}
Looking to change the background color of the navigation to black while viewing in mobile. Would then like to change the "menu " text to white so that you can see the text. Thanks for the help. I can't find the right css selectors to target this.
www.jobspark.ca
UPDATED
#media all and (max-width: 640px) {
.top-nav {
background: #000 !important;
color: #fff !important;
}
}
This should solve the issue, but you should notice that the screen width should not be more than 940px. The 940px to ensure that it will work with almost any mobile.
#media only screen and (max-width: 940px) {
.top-nav {
background: #000 !important;
color: #fff !important;
}
}
You can target a specific viewport width through a media query in your css:
#media all and (max-width: 400px) {
.top-nav {
background-color: black;
color: white;
}
}
This is the only way using css, you can not target a specific device (mobile, tablet) but rather target some specific attribute of that device (in this case, the width or the screen).
You can googling for 'media queries' or 'responsive design' to find deeper examples.
You first issue is that there is no element on your page with a class of .top-nav. You might mean .nav. However, there are many more problems there than just the background color. You need to set a lot more styles for the navigation on small screens for it to show up.
On your desktop browser (like Chrome) narrow the browser right down and right click on the menu to Inspect Element. You can see all the styles that apply to the menu at that width, and then go about setting styes for the menu.
This is how I solved it:
#media (max-width: 640px) {
.mobile-nav .show-nav {
display: block;
padding: 1em 40px;
color: #fff;
background: #000;
cursor: pointer;
border-bottom: 1px solid #000;
}
}
This is the website, and more specifically, the page.
I'm currently working on a responsive theme, which has media queries, but something about the CSS modifications I've made, are preventing the menu (top right in gold), and the sidebar (this only exists on the blog page, but it is important... it's the box at the right of the content block) from merging with the header/title/left-hand content. It shows up on the ipad mini, the regular ipad 4, but it is okay in an android browser screen. You can observe the issue by resizing the browser.
#media only screen and (min-width:768px) {
.site-navigation .nav-menu {
display: block;
}
}#media only screen and (max-width:767px) {
.menu-toggle {
display: block;
}
}#media only screen and (min-width:768px) and (max-width:959px) {
.wrap {
max-width: 728px;
}
That is the media screen css. The respective divs are all positioned relatively. Does anyone have any advice on how to fix this problem? Any code tidbits?
The first thing I see is that this HTML is not closed:
<div id="header" onclick="location.href='http://camillagabrieli.com
That needs to be fixed first. Try adding outlines to your CSS:
* { outline: 1px dashed black }
I find that helps a lot when it comes to seeing what's actually wrong with the different floated elements. There are quite a few things wrong with your arrangement and your CSS. You don't need to relatively position all of these things.
To fix the main content section:
Add the following to #main:
overflow:hidden;
And make #content and #sidebar-primary like this:
#content {
float: left;
width: 75%;
margin-left: 40px;
margin-right: 10px;
margin-top: 10px;
min-height: 50px;
}
#sidebar-primary {
float: left;
width: 20%;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
height: 50%;
}
I'm not sure why you had margin-top: -460px; in your code, but that was what was breaking it, as was the fact that #main wasn't actually containing #content and #sidebar-primary. The code still needs cleaning up, but this will fix it more immediately.
Does this help?