Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have assembled the draft of a portfolio page to be the starting point to build it. Everything works well on Chrome and Firefox, but in Safari, the top navbar leans to the right (screenshot at https://i.imgur.com/KcL45wY.png). The behaviour I would like to have is to have the nav menu to be displayed without any spaces to the sides, like it does on Chrome or Firefox
Inspecting the elements, the most likely selector to change it is one called items-container, but tweaking is values do not solve the question. Scrolling to see the inheritances lead to another selector, nav-items. However, if any change is done there, the display in the other browsers is affected.
I am not a CSS expert, but I usually manage to set up things properly, but I don't know what can be the problem (which should be a Safari one), let alone fix it in a way that works the same way in any browser. I created a Codepen with the source code (https://codepen.io/gobbet/pen/PoqYvbr) and would like to ask for insights for the problem (which I presume that should be somehow straightforward). Thanks to all in advance for the availability.
add left: 0; to .items-container
Not all browsers position absolute elements at 0 0 of the parent element
in Safari, the default for left is not 0.
.items-container {
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
height: 70px;
position: absolute;
top: 0;
left: 0; /* <- */
width: 100%;
z-index: 10;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm modifying a Shopify template but my CSS knowledge is limited and I'm stuck with this problem for hours already.
When I put margin: 3rem 0; in .slick-slider, it works but whenever the page loads, the card stacks jump to new positions.
When I put margin: 3rem 0; in .featured-products, the card stacks stay in their positions but the glow is stopped like the first photo. Also, the titles disappear when I put top: -30px; into .widget-title.
I really appreciate if you could show me how to make it work!
You're looking for padding, not margin.
I navigated to your sign and used the login credentials you provided, added some padding-top to the cards in the chrome dev tools, and the glow had more room at the top.
Specifically:
.grid-item {
padding-top: 3rem;
}
Here, .grid-item refers to the children of .products-grid.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
You can find the staging environment over here:
http://axces-staging.houston-1.hybridmedia.be/
I have a lot of unnecessary spacing above the title "Onze aanpak".
I only have this issue on Firefox. It looks fine on chrome and safari.
Cannot find what causes this. Does someone have any idea?
Thanks.
It's due to two values in the elements above that space:
1.) The top: -30rem in homepage-middle__wrapper
2.) The margin-top: 30rem in section--products homepage-middle background--primary
Erase both to eliminate that space.
First of all, remove the negative value for top here:
.homepage-middle__wrapper {
margin-bottom: -27rem;
padding-top: 2.5rem;
position: relative;
top: -30rem;
}
Remove the margin-top here:
.homepage-middle {
margin-top: 30rem;
padding-bottom: 0;
}
At a padding top to the container or wrapper to achieve the same effect as before.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm having a difficult time isolating a 1-pixel edge that appears on the right-hand side of my site. It happens at different window sizes on Chrome and Safari, and I can't seem to figure out what's causing it, or whether it's actually something completely unavoidable with my setup.
Website: www.husamelfaki.net
Thanks very much if you can help in advance, really appreciate it.
Husam
EDIT: Removed sensitive password detail, now that the question's been answered. Thank you.
Your issue comes from every element on the right side like this one:
<div style="line-height: 0 !important;
font-size: 0px !important;
position: absolute;
left: 49.93055555555556%;
top: 0px; opacity: 1;"
class="thumb grid-item masonry-thumbs-item masonry-content_4qnsts4j5-item masonry-content_4qnsts4j5-item-1 remove-gutter-yes masonry-span6"
data-thumb-src="http://www.husamelfaki.net/wp-content/uploads/2016/11/ntc5_thumb_2.jpg">
Its width is 50% but the element's left side isn't placed at 50%. Set the left to half the width with the CSS style rule left: 50%;.
And I suggest you to use flex-boxing which is perfect for this kind of pages.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I building a website with HTML and CSS as part of an exercise. However, I have stumbled across some odd space I need to get rid of. Inspecting the webpage, it seems like there is extra empty content being displayed above my images. This happened after I added navigation arrows.
If anyone have any suggestions on how to deal with this situation I'd be very happy.
The website is as following: http://folk.ntnu.no/nikolahe/gloshaugen/gloshaugen.html
html: http://pastebin.com/micJCBq1
css: http://pastebin.com/WW9i52qc
Suggestions towards layout and good practices are also much appreciated.
This happens because you use position:relative on the #previous and #next elements. Like this they are repositioned but still use up the space they would originally occupy.
Use the following css instead:
.block-wapper {
position:relative;
...
}
#previous {
position: absolute;
left: 10px;
...
}
#next {
position: absolute;
right: 10px;
...
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I am trying to get a slider that drops down from the top of my page to go over my menu but can't.
I have applied a position: relative to both of them and tried to put the z-index of the menu to 0 or -10 and I have but the slider to z-index: 10000 with it also postion: relative but it's still going behind the menu.
The page is at http://www.tassolarpanels.com.au/ and the slider in question is the blue "Get a Quick Quote" button on the top right of the screen. As you will see when you press it - it goes behind my menu.
If anyone has any ideas what I am doing wrong I would much appreciate your help!
You need to make sure that the parent element, in this case, #sliding-panel-container, has the correct z-index applied which it currently doesn't -- it is listed as z-index: 1 which is why it's showing behind the navigation listed as z-index: 2.
Try this:
#sliding-panel-container {
... /* Whatever your other CSS is here */
z-index: 3;
}
Add to your .site class:
position: relative;
z-index: 0;
#sliding-panel-container {
display: table;
position: relative;
width: 100%;
z-index: 9999;
}