#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
I have a an 'overwrite' problem (similar to how bootstrap forces link-style, but you can just use !important). In pure-css you can create responsive menus.
It has a small 'icon'-like thing (see here: http://purecss.io/layouts/side-menu/# resize to small screen first).
I Installed bootstrap, and now simply, the 3-line 'icon' doesn't appear anymore... What could be the problem? Removing the bootstrap link makes it work again... I can't find any style responsible for the 'icon'...
Should i post a jsfiddle? You can simply add bootstrap css with Chrome 'sources' into the css file and save it here: http://purecss.io/layouts/side-menu/#...
Thanks in advance
I fixed it! In the end all i had to do was set the property box-sizing to content-box for .menu-link using CSS. Bootstrap automatically sets it to border-box.
box-sizing: content-box;
Related
I'am using Bootstrap 4 in React.js project.
I have two elements - navbar and alert implemented from Bootstrap4.
Since I've set position:fixed in both (overrided css) both of them become semi-transparent. I've never used transparency for neither of them and haven't use rgba color codes for them. It just happened by itself ... why and where I should seek ?
I found the answer by myself. Post it here in hope to be helpful for some other newbie :)
So:
When you're using Bootstrap4 read documentation carefully ;)
When you want fixed top/bottom navbar WITHOUT transparency instead of overriding .navbar class in your's csses by adding position:fixed apply ready-to-use Bootstrap class fixed-top/fixed-bottom/sticky-top applying them to your html/jsx Bootstrap element
Docs: https://getbootstrap.com/docs/4.0/components/navbar/#placement
I'm developing a Meteor app with Bootstrap 3 package already installed and trying in making a buttons navigation.
I've noticed that buttons have space in between but, even if i've inspected, i was not able to discover any margin style property to make it possible.
How is that possible? Where did these margins come from?
You can see and inspect the buttons even in the official Bootstrap 3 Doc http://getbootstrap.com/css/#buttons
The issue comes from the CSS property display:inline block which forces white-space between inline elements. It is not an HTML specific issue. See this post from CSS-Tricks for more information: http://css-tricks.com/fighting-the-space-between-inline-block-elements/.
A workaround fix is to modify the HTML, which #Dan posted, but this forces you to break standard HTML formatting and a developer down the road could space things out and break your solution.
A few CSS fixes are to use floats instead of display:inline-block. You can also add negative margins on your buttons to remove that space.
It's not margin, it's actual spaces in the HTML.
If you place the buttons on a single line in your code there won't be any spacing.
See this bootply demo for an example of buttons with no spacing. Also refer to this question How to remove the space between inline-block elements? for more information.
I'm using the Nivo Slider and all the images are the same "height/Width" 766x400 but when viewing the slider in Firefox it up-scales everything to a masive 1,333px × 696px.
The interesting thing,when you do a split screen in the browser everything looks fine but full screen everything is blown up.
I'm wondering what CSS code I should be using to fix this issue
I would post my whole "code" but the images are related to my business and I'm not really sure.
Thanks
This may be caused by inline styles set by Nivo Slider, but it's hard to tell what the cause can be with example CSS/markup.
However the basics for responsive images is to make sure the width (or, often preferably, the max-width) is set to 100% and that the height is set to auto. If there's inline CSS that will override your own CSS so you may either need to add !important to those rules or edit the plugin files for Nivo Slider and remove the printing of inline styles.
So basically, try this (but you may want to use a more specific selector and you shouldn't use !important unless it's absolutely necessary):
img {
max-width: 100% !important;
height: auto !important;
}
I've been tearing my hair out trying to figure out why my pages based on Bootstrap responsive have an extra 25-30px on the right side in Firefox and IE when the window is <600px in width. I started to remove parts of my code one by one, until I was left only with the fluid nav bar and the Facebook SDK. Once I then removed the Facebook JS SDK reference, the padding on the right side disappeared.
You can see this here:
FB JS SDK included, extra right side padding:
https://dl.dropbox.com/u/571515/chewsy/Test/FB-with.htm
If you remove the FB JS SDK, it works as expected (no padding on right side):
https://dl.dropbox.com/u/571515/chewsy/Test/FB-without.htm
Since I need the Facebook JS SDK for the like buttons on my page, how can I work around this?
Oddly, in Safari and Chrome this does not repro.
Screenshot from Firefox:
Screenshot from IE:
As suggested by CBroe, you could try to alter the #fb-root style, but there may some JS actions that will change it again, or it may just disable some functions.
So I would suggest to add this to your styles :
html { overflow-x: hidden; }
With this fix, you may encounter one slight problem if you have a very small window and want an horizontal scrollbar. You might try this, though the padding reappears under 200px :
#media (max-width: 200px) {
html { overflow-x: auto; }
}
Tested on FF13, and IE9 (can't resize IE9 window to less than 200px).
It’s the Facebook DIV element #fb-root that’s causing this – once you set it to display:none or position it absolutely with say left:-200px via Firebug, the extra margin disappears.
However, doing so in your stylesheet might not be a good idea, since the SDK uses this element to display it’s dialogs etc. – so either those might stop working (setting it to display:none is supposed to stop it working in older IEs completely), or the SDK might overwrite such formatting again itself.
You should thoroughly test this, if you try adding formatting of your own to it.
I have a small gallery of thumbnails. When I place my mouse pointer over a thumbnail image I'd like to have a full size image pop up in a div in the top right of the screen. I've seen this done using just CSS and I'd like to go down that route rather than use javascript if possible.
Pure CSS Popups2, from the same site that brings us Complexspiral. Note that this example is using actual navigational links as the rolled-over element. If you don't want that, it may cause some stickiness regarding versions of IE.
The basic technique is to stick each image inside a link tag with an actual href (Otherwise some IE versions will neglect :hover)
Text <img class="popup" src="pic.gif" />
and position it cleverly using absolute position. Hide the image initially
a img.popup { display: none }
and then on the link rollover, set it up to appear.
a:hover img.popup { display: block }
That's the basic technique, but there are always going to be major positioning limitations since the image tag dwells inside the link tag. See the link for details; he uses something a little more tricky than display: none to hide the image.
CSS Playground uses pure CSS for this type of thing, one of the demos is surely to help you and as it's all CSS just view source to learn - you probably want to use the :hover pseudo class but there are limitations to it depending on your browser targeting.
Eric Meyer's Pure CSS Popups 2 demo sounds similar enough to what you want.
Here are a few examples:
CSS Image gallery
Cross Browser Multi-Page Photograph Gallery
A CSS-only Image Gallery: Explained
A CSS-only Image Gallery: Example
This last one acts upon click. Just to be complete in behaviours.