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.
Related
would really appreciate some help please!
I used some lightbox code I found online (like I do for every bit of code I need, the noob I am), but when you open something in the lightbox you can still scroll the page and see some of the content behind. I made the z-index like 9999 or whatever, but that's obviously not the issue.
Would anyone mind having a look and letting me know how to fix? Thanks in advance!
Site: https://runplymouthharbour.co.uk/test#step12 (click image to open in lightbox and you can see content below it showing on top)
You should try to include a code sample in your questions as it makes it easier to answer.
But to answer the question, your z-index fix won't work as your class row__container has z-index: 1 rule, which overrides the z-index you set in the span that displays your image (it does this because the row__container div is a parent of the span).
To fix, remove that z-index: 1 from row__container.
As you can see in the page, the share buttons gets separated from the layout and is to the extreme left. So it looks a little odd.
I want to move the share buttons a little right so that it matches with the alignment of the content layout.
The page i need help with click here
You need to enclose the sharing buttons in a P element, just like the blog content. If your browser supports it, you can usually right-click on a part of the page and choose "Inspect" or "Inspect element". From here you can see the layout in action, and see what is different between the two sections.
Inspect Element on Chrome:
Choosing elements in the inspector to see their styling and layout:
Notice how the share bar is structurally different (wrapped in a div element with different classes instead of a P element):
It looks like you need to learn more about CSS, Styles, HTML, and margin/padding if you wanted to solve this on your own.
Well, you have to learn how to use the devtool to apply/test the CSS in the browser as #whiterook6 said.
For your problem, you should add
.the_champ_sharing_container.the_champ_horizontal_sharing {
margin-left: 26%;
}
in your css file where .the_champ_sharing_container.the_champ_horizontal_sharing is the class of the social sharing div which you can see in the devtool inspect.
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>
I want to customize the body of the Wordpress Theme "attitude" in a way to remove the grey gap between the header (white space) and the top of the page. In other words, I want to remove exactly this grey gap and also the grey gap between the end of the body near the footer and the end of the site.
Here is a live demo of attitude: http://themehorse.com/preview/attitude/
Thank you very much in advance and please dont hesitate to contact me if there are any questions.
Best regards
From a quick look using the chrome dev tools, the header element seems to be the culprit. It appears they are applying a 30px top margin to it using the branding id selector.
#branding {
margin-top: 30px;
}
You can change this on line 549 of style.css.
Now for a lecture...
Not really, but I want to show you a few things to help you solve these types of problems in the future - It never huts to know more about the tools available to you.
You can open chrome dev tools by right clicking anywhere on the page and selecting Inspect element, or use the keyboard shortcut for your OS
In the very top left corner of the chrome dev tools panel that pops up there is a mouse pointer in a box symbol. If you click it to enable it and then move your mouse around the page you will see elements being highlighted in various colors.
Here we can see that the grey bar at the top has been highlighted in orange, and a large section below was highlighted in blue.
Clicking the left mouse button while the element is highlighted as above will jump to the element in the Elements tab of the inspection tools. We can see that the element we selected was a header, with an ID of branding
A quick scroll through the styles inspector on the right reveals a id selector for branding and a declaration to set the top margin to 30px. The inspecter is also kind enough to tell us where in the source code the rule comes from; style.css, line:549.
If we switch to the Source tab and open style.css in the inspector (or open the source code in a text editor) then we find the branding id selector on line 549 as promised.
For more information on how to explore webpages i recommend you read the dev tools guides for google chrome or mozilla (which ever browser you prefer to use most)
Firefox: https://developer.mozilla.org/en-US/docs/Tools
Google Chrome: https://developer.chrome.com/devtools
The reason the header is spaced off of the top by a little bit is because the header tag with the id 'branding' has the CSS property margin-top with the value 30px. This causes the header tag to be set 30px from the top of the screen. Just delete that line of CSS code to move the body to the top of the page.
When I access the site with an anchor set (...#xxx) the image on top is shifted outside the viewport.
Normal behaviour: http://soc.org/index.php?id=4
Corrupted design: http://soc.org/index.php?id=4#c272
The top image is positioned absolute.
There are some blank lines directly after the google-analytics code. If I delete them, it works.
Thanks for any suggestions!
It's easier to see what's going on if you turn off the overflow:hidden on div.upperPage
You can see the anchor is causing the scroll on the contents of that, rather than on the page as a whole. However, I don't know of any specifications that state what elements should scroll to achieve the anchor requirement.