I am currently developping a website using twitter Bootstrap as a base. I develop using Chrome and there is no problems on it but when viewing the same page with Firefox, the menu and the content position themselves weirdly, as if there is no space.
You can take a look there:
http://www.penthousemontreal.com/
http://penthousemontreal.com/collections/moderne/
What could be causing the trouble?
update
Your are using a top: -100px; (relative position) on the .brand class (the image in your nav bar). The image will still take space in FF / IE on it's original position. Cause the float:left; of this images your content floats on the right side of this 'empty space'. A solution can be found here: CSS using negative relative positioning issue. Replace top with margin-top:
.brand {
margin-left: 20px !important;
margin-top: -100px;
position: relative;
}
Maybe your bootstrap files are changed / corrupt. You import bootstrap/css/bootstrap.css (and bootstrap-responsive.css) from wp-content/themes/MMS/style.css which seems to be version Bootstrap v2.3.2.
When i load your site with //netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css the problem is fixed. See:
Related
Codepen: https://codepen.io/Bobby__K/pen/eYZXQKo
I made a navbar with the encompassing nav given position: fixed.
.main-nav {
position: fixed;
z-index: 10;
left: 0;
top: 0;
padding: 0 5%;
height: 100px;
background-color: white;
width: 100%;
}
When I run this on Chrome, Firefox, and Firefox mobile, it works as intended; i.e. the navbar doesn't move and stays at the top. However, when I run it on Google Chrome mobile and scroll down, the navbar goes up a bit and then the fixed positioning seems to kick in. The problem here is that this cuts off a good 10% of my navbar.
Since this only happens when I preview Google Chrome's mobile view, I was wondering if this was just a visual bug shown in developer tools, instead of something that would happen once the website's live.
Notes:
I've made it responsive using the input method and with CSS :checked. As such, I usually keep the checkbox to the side with overflow-x hidden. I've tested the project while having the checkbox on the screen, but the same problem happens, so that wasn't the problem.
I've also tested this on Opera mobile view and Brave mobile view and the scrolling issue happens there too; so maybe this is something to do with how my code reacts to the Chrome Engine?
I've narrowed it down to a weird interaction with my #media screen and query. Whenever I make a change, it fixes the problem. However, once I close developer tools and reopen it, the scrolling issue reappears.
do you happen to have a codepen or something with the full html and css (and js if applicable). I'm wondering if there's a conflicting style outside of .main-nav that's causing this.
I am trying to create a sticky table header. Using this CSS code it works perfectly on a standard table (it will remain sticky all the way to the bottom of the table.
th {
background: white;
position: sticky;
top: 0;
}
However I need the table to be responsive for mobile devices (ability to scroll right). Unfortunately, it no longer works when I add the bootstrap table-responsive class (please see my https://jsfiddle.net/b8x16eht/)
How can I get it to function on both mobile and desktop (without setting fixed heights)
EDIT: Thanks to #UfguFugullu for pointing out another possible solution which is an improvement. It works well for desktop however it still does not work in responsive mode (when viewing from a smaller window). Updated fiddle here: https://jsfiddle.net/aqfjozrm/
.table-sticky th {
background: #fff;
position: sticky;
top: -1px;
z-index: 990;
}
I managed to find a website which has gotten it to work on responsive tables as well as full width although it is not using bootstrap https://www.timeanddate.com/weather/new-zealand/auckland/hourly
I am starting to think that we need to add a javascript listener to offset the thead position from the body then update the top position style of the thead. Any js gurus here :)?
Demo of slide menu in the top left of the page:
https://cuppalabs.github.io/cuppa-ng2-slidemenu/
Using the Google Tools I have been able to change the margin-top of the menu, but I've had no luck doing the same with my own copy.
My best attempt:
cuppa-slide-menu span div .menu-container .cuppa-menu .show-menu,
cuppa-slide-menu span div .menu-container .cuppa-menu .hide-menu {
margin-top: 134px !important;
}
I have also been unable to locate the css file located at src="/path/to/angularjs/angular.min.js"
Regarding the icon sizes, I was unable to do it even on Google Chrome.
Any advice would be much appreciated.
There is not a css file as such, the styles are included in the js files, I have been able to change the margin of the menu by writing the following in my stylesheet:
.cuppa-menu-overlay, .menu-container[_ngcontent-c3]{
margin-top: 150px !important;
}
And the result is
I hope I have helped, greetings
I have strange problem with website responsiveness.
When on desktop resolution no horizontal scroll appears at Chrome.
When i resize it to lower resolutions 400px width and less the horizontal scroll appears.
I think some element is forcing width bigger than actuall screen size but i cant find it!
Please help.
Here is website link
I checked your code,
You have to get rid of this code in your footer styles. Your margin-right is making your content overflow.
Try using padding, or something similar instead.
It appears you are using bootstrap for that.. So the best way to do this would be to overwrite this by creating a
#footer > div.row {
margin-right: 0 !important;
}
or if you have bootstrap locally then you can probably delete from there. But i just overwrite it using `!impornat
.row {
/* margin-right: -15px; */
margin-left: -15px;
}
The guy who created the website for my church said there is no way to fix the issue and that we shouldn't worry about it. But I think he's wrong and I'm attempting to fix it myself. My coding background is in C++ and Cobol but not really in CSS. I'm learning though, so any help here would be great.
The site uses Joomla and is here: http://www.anointedesign.com/mtvernon/site2/
It looks good in Firefox and Chrome but in Internet Explorer there is a huge gap at the top between the top header box and the slide show. I believe this is an IE issue in the way it handles negative margin values but I may be way off here and need help.
The entire top nav, logo and seal should be very close to the slide show, to the point where the left seal should overlap the slide show by about 15px.
This css code will fix it:
#horiz-menu {
float: left;
width: 100%;
margin-bottom: -110px;
}
#header-bg > div.wrapper {
clear: both;
}
#showcase-section {
margin-top: 0;
}
The problem is caused by floats and clears inside the horiz-menu div. IE doesn't like divs with that kind of CSS code. :)