My bootstrap labels and badges disappear off the webpage when the page loads for the first time, using my samsung galaxy s3 they only reappear after when I refresh the browser window. Why is this happening and how can I simply force them to appear the first time the page loads please. My labels and badges are not empty, so the display none function has nothing to do with it.
An example of the code as it is that does not display the first time the page loads is:
<span class="badge badge-important">info</span>
also tried to remove below with no luck
.label:empty,
.badge:empty { display: none; }
The normal boostrap.css is attached to my page and its the only style sheet that has the label selector in it.
Has anyone come across this weird sort of thing?
Thanks
Okay, had this problem on a Samsung Galaxy Note tablet, an LG Optimus phone, and an LG Nexus phone. When I removed the below code from the bootstrap CSS file completely, the problem went away.
Remove:
.label:empty,
.badge:empty { display: none; }
Looks like the Samsung/LG browser ignores the :empty and just makes the .label and .badge display:none whether it's empty or not.
I know that the original questioner said that he tried this and it didn't work (cache issue maybe???), but it did work for me, so I thought I'd at least post the answer since this was the #1 google result when I ran into the problem.
I have the same problem.
When i try this in my web browser all works fine.
<div>
some text <span class='badge'>1</span>
</div>
But, when i try it in my android browser, the badge not show. I solve this problem with.
<div>
<span> some text <span class='badge'>1</span> </span>
</div>
Related
I’m running into an interesting CSS issue on my portfolio site that I haven’t been unable to solve on my own. I’m using the and tags to transition from an image to a caption/button on desktop hover or mobile click. Unfortunately, it works on all browsers except for Safari iOS.
On my iPhone, I’ll click one of the images and it won't respond; but if I hold down on it, I'm then able to select the caption text which is seemingly there but not visible. I don’t experience this issue on any other mobile browsers that I've tried so far.
See the “Projects” section of this page from Safari iOS to attempt to duplicate the bug.
The specific lines of code regarding this issue can be found here (HTML) and here (CSS).
Note that I used the Bulma CSS framework to create the site, and have since tried several manual changes/additions to the CSS for this section in an attempt to resolve the issue. No luck yet. Any ideas?
The issue is the .overlay div inside of figure. Because it span the entire width and height of the parent, it's blocking clicks (taps) on mobile and preventing figcaption from being revealed.
One way to fix this without JavaScript (the dream) is to add tabindex="0" on the figure element.
<figure class="image is-3by2" tabindex="0">
Adding tabindex will allow the element to respond to :focus, removing the overlay when figure has been touched.
.image.is-3by2:focus .overlay {
display: none;
}
On mobile (or desktop with small window size to replicate mobile, as per the screenshots) the form on my page loads fine with default dates, but when a new date range is selected the form shifts to the left after making the selection (or rather, a gap is inserted to the right) but I can't find anything using F12 developer tools that is causing it. It is not possible to scroll to the left.
On page load:
After selecting dates:
The form itself is displayed by embedding a third party JavaScript link on the page - is there anything I can do to prevent this from happening? I can't figure it out!
Note: The page uses a YouTube video background which is blocked by the firewall where I am working from at the moment (hence the grey background), but is not causing any JavaScript errors. The problem is the same on all mobiles and on networks where the background is able to load.
Live example at #########.com (address will be removed when resolved)
Thanks
UPDATE: As per the answer from Wouter, removing the overflow: hidden from <section class="gg-section hero video-home" id="dots-section1"> fixes the issue, but unfortunately that causes other layout problems so cannot be applied.
The problem is likely to be caused by the video being 300% width. Try to set a overflow: hidden; to the following element:
<div class="video-background">
May not help but..
I had a similar issue with page jumping and forms before.
It was caused by an <input class="hiddencheckbox" type="checkbox" />.
Every time I used js select/deselect the checkbox, the browser would try and jump to the checkbox position, which I had hidden by moving its position outside the viewport.
.hiddencheckbox {
position:fixed;
right: -1000px;
// BAD WITH JS
}
I removed the positioning and changed it to:
.hiddencheckbox {
display:none;
}
I have a problem with a slideshow I coded.
It worked fine before, the website is online since january.
The problem is only when using Firefox 46, other navigators are displaying the elements.
The page with the slideshow : http://www.rotin-file.com/en/accueil
8 buttons appears, in the debugger I can see the 8 containing background images of products, and the absolute containing the title, reference and price, but it doesn't appear in the website...
I tried to change many css properties (with the debugger) to find from where the problem comes (z-index, visibility, display, opacity, ...) but I can't understand why it's ok with Chrome and IE but not ok when using FireFox...
I verified all plugins are desactivated (also adblock is disabled for the whole domain) and tried on other computers with firefox, it never work with it...
Any idea to help me ?
Sorry for my bad english, and thanks for any help.
Two things to do, first remove:
#slideProduits #cntSlide {
perspective: 1200px;
}
Second, you need z-index for your pager, so add:
#ctlSlide {
z-index: 100;
}
But why it does not work in FF46, I have no idea. Guess 'cause css perspective is still an 'experimental technology'.
I'm playing around with CSS 3D animations and I've hit a strange problem.
What I'm doing
Created a card which has two sides, front and back, both images.
Problem
The first time the card flips to show the back card it does not do it smoothly, you see the first card spinning around and then you see nothing for a split second and then the back card just snaps into view.
Weird
It's only the first flip that's wrong, all other flips after it look smooth and exactly what I'm looking for.
What I thought the problem might be
That the back image was not loaded yet by the time the first flip happened. I tried to preload the image with JS but it did nothing.
JSFIDDLE
http://jsfiddle.net/mz49d/
It's very annoying and I'd like to hear anyway I can fix this. I've even thrown in every vendor prefix in the CSS but it changed nothing.
EDIT
I just tested it in FF30 and it seems to work. It does not work in my Chrome 36.0.1985.125.
It looks like putting the images as css-background-images works in Chrome and FF.
Not sure if there are any drawbacks to using this method on other parts of your project though...
HTML
<div id="card">
<div class="card-side front-card"></div>
<div class="card-side back-card"></div>
</div>
CSS
.front-card {
background: url(http://images.wisegeek.com/planet-earth.jpg);
}
.back-card {
background: url(http://haughtonmarsproject.com/wp-content/uploads/2013/11/Mars-1-Project.jpg);
}
I have read in a few other posts that creating a tappable link for a phone number can be done with tel: in an anchor tag
I would like to implement this in a responsive website.. something like this:
Call Us! <span>(555) 555-5555</span>
(the span tag I plan to use to hide the phone# with CSS)
The idea is that on a desktop you will only see "Call Us! (555) 555-5555", but not be an actual link
But when we scale down to mobile, you will then see a stylized link that just says "Call Us!" that you can click.
I'm sure there is a way to accomplish this with JavaScript or JQuery... but is there anyway to accomplish this with CSS Media Queries?
Note: Visual styling is no problem.. just looking for a reasonable solution for the "switching" concept.
Thanks in advance!
There really isn't anything wrong with leaving the link on desktop computers. This would for example allow you to click the link to call via Skype or other VOIP program you might have installed.
If you still want to change the link, just create two of them. One that is shown for desktops, the other for mobiles.
You could create 2 links, one to show on desktop and one for mobile
OR
Use css to style the anchor with phone number in them to default cursor so it does not look like a link even when you hover. To complement this, you need to use js to disable the click action.
This is all assuming you can detect what device you are on reliably.
I think your best bet would be to add an ID to your anchor tag and through your media query you can hide it on the desktop version there no need for the span.
Then for your non anchor text hide that when you are scaled down through another ID in a media query.
TEL: 123-456-789
#media screen and (min-width: 600px) {
.tel-link {
color: #000 !important;
text-decoration: none !important;
}
}
This will display the phone number in plain black for the browsers over 600px wide ( so it doesn't look like a link ) even though it still has a link. I think it's ok because you can make a call from PC nowadays.