My following app has a list of winners. It all works great on the desktop, but as soon as I resize to the mobile size, The winners don't seem to be clickable anymore.
https://religious-freedom.herokuapp.com/
I think some part of the css is not working very well.
I was my first big app, so all the codes are a little messy.
Can someone give me an insight on what is causing it?
Thanks
Your link elements are being covered by other div elements. I added the clearfix class to the following div and it "uncovered" your links.
<div class="silver col-lg-4 col-md-4 clearfix"...
See http://getbootstrap.com/css/#helper-classes-clearfix for more about clearfix class. It is common to add
It is very helpful to use the browser devtools to examine your page. As you mouse over elements in the devtools window pane it will show where your divs are positioned and if they may be unintentionally overlapping with other content.
I know why now. Check your html, the link is not properly included in your picture. If you move the pointer, it only works when you click the anchor tag not the image. So change your code, make sure it works for img clicking.
<a href="http://religiousfreedomandbusiness.org/global-awards/don-larson.html" target="_top">
<img src="http://s3.amazonaws.com/assets.my-bucket/candidates/avatars/000/000/006/medium/Don-Larson.jpg?1470198723">
<img src="../images/silver.png" class="medalsilver">
</a>
Related
I have a website that uses Jump Links to move between page elements (it's an interactive User Guide), and all works ok on Firefox, IE, and Edge, but Chrome and Opera ignore the 'padding'.
As the website has a fixed menu bar, this means the jump link location vanishes under the bar on Chrome and Opera.
The simple code I am using for the jump link offset is:
<a id="namexxx" style="padding-top: 100px;"></a>
What can I do to make this work with Chroma and Opera?
All the solutions I have been able to find via search do not answer the difference issue between the different browsers.
Cheers!
Padding isn't a suitable approach to repositioning an element in this way, because it would increase the size of the element itself. In the case of a link, you'd effectively be creating a larger link area, with the space above the link becoming clickable too.
You'd be better off using margin-top which would move the element down the page. Depending on the rest of your markup, you might need to set display: inline-block; on the link element too.
I set up a single page layout so I'm using anchor tags as part of my site navigation. All of them are working except the portfolio tag. When I select portfolio from my menu, the screen jumps down to the proper section and then immediately moves to the section above.
I'm not sure if there is some interference from any of my other code, or if the animation of the "solutions" pictures/text is creating the issue but I can't seem to solve it on my own.
Something to note is that the link does work, but only when you already have portfolio selected (ex. /#portfolio)
My site is http://muvltd.com
Any idea?
There is no problem with your anchors. The problem is that the orange circles in the solutions section are not displayed until you scroll down, so they are not yet rendered into the page. This gives the portfolio section a higher absolute position in your page. Chrome jumps to your section which first works fine. But when the solutions section is loaded it pushes down the portfolio.
If you know the exact height of the solutions section or the images contained in the section, I suggest you assign this height to the respective elements. This way, all dimensions are set correctly before the content is actually loaded / initialized.
I found a solution, in my original code, the anchor tag was outside of the paragraph tags:
<p style="text-align: center;padding-top: 55px;">[maxbutton id="5"]</p><a id="portfolio"></a>
Putting them inside the tags solved the problem:
<p style="text-align: center;padding-top: 55px;">[maxbutton id="5"]<br><a id="portfolio"></a></p>
I can't tell you why it would make a difference but it did, thanks for the help!
I'm working on a html only webpage, and I am having some issues correctly formatting my social-media links. I have a fixed position div that is 48 x 190, and within it I'd like to put 4 different social media icons which link to their respective pages. I was able to set up the div correctly in css styling, and I was able to insert the images into the correct position just fine. However, as soon as I added the link tag to the image, it all broke. The formatting of the image seemed to change just by adding the link to it, and they now took up all this extra space around themselves, went outside the borders of the div, and refused to be properly centered. Why is adding a link to the image breaking the formatting in such a strange way, and how can I fix it so it remains formatted how I want even after the link is added?
Thanks!
have you set the border of your images to 0 ? When inside a link, browsers put a 1px border to images if this value is not set in the CSS.
If that is not the problem, posting your code (see jsFiddle for example) could help
I guess, the issue is related to the different size (in pixels) of icons, that cause to increase div and distrub the UI. I have also used Image-Links as following and it works fine. First ensure your icon size.
<a href="javascript: showPopup();" id="groupEdit" class="link">
<img src="/images/redPencil.png" title="Update">
</a>
http://www.nanaplum.com/collections/frontpage/products/hurricane-sandy-red-cross
The logo is a link, and its href is http://www.nanaplum.com
but it does not actually work, why?
remove the css attribute position:relative in div#cart-summary.
This makes div#cart-summary overloop the logo.
Please remove the padding top and height of this #cart-summary.This div moves over that logo so that the link not working.
div#cart-summary is in front of it.
Tools like Firebug or Chrome's developer tools are nice for debugging this kind of problem. In Chrome, you can right-click >> Inspect Element and then poke around. When you do this you can manipulate the page, try something like deleting that div node, find the link becomes accessible, then decide how to fix it in your markup or CSS.
Now go learn about z-index.
I'm experiencing an extremely weird behavior when using Twitter Bootstrap's affix plugin, fixed navbar, and anchor links together. I'm going to attempt to explain my problem but it's kind of difficult to put into words, so please forgive me if I'm not the clearest.
I have a navbar-fixed-top at the top of my page. Under that I have a .container div. Inside there I have two div.spans (span4 and span8). Inside span4 is a div.well that has the affix-top class applied to it (so it gets a fixed position and "sticks" where it's at). Inside my span8 I have a bunch of content.
Inside the well div there is a nav-list. This list gets populated with li/a elements based on items in the span8 (I have a little script that does this). The links are anchors, so they point to elements on the page (#myId, #myIdTwo, etc). All this works wonderfully. My list is there, the links are clickable, they take me to my elements. Great.
However, not great. Sometimes, when I click one of the links, I go to my anchor in the span8 but the page doesn't seem to refresh properly. I sometimes see strange white "boxes". Or the content inside the span will show partly above the fixed nav-header. Sometimes half of the nav-list disappears.. but then comes back (sort-of) if I move my mouse around it. Like you used to see in some old Windows applications that were getting bogged down.
You can see for yourself here: http://jaylach.github.com/lutra. You may need to click some of the nav links a few times before you see the issue.
I've been struggling with this all day and I cannot, for the life of me, figure it out. I've taken out the affixes, I've taken out the fixed top navbar, I've taken out my z-index. I just can't seem to figure it out.
Does anyone, anywhere, have any clue as to what could be causing this? I would really appreciate any advice you guys could give.
Many thanks in advance!!
This is a WebKit bug.
add -webkit-transform: scale3d(1,1,1); to both .navbar-fixed-top and .affix
both styles are defined in bootstrap.min.css. So override these 2 styles in your main.css as:
.affix,.navbar-fixed-top {
-webkit-transform: scale3d(1,1,1);
}