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
Context may or may not be important here: I'm using Ghost on Github Pages via Buster. Buster is a tool that generates a static site from a local Ghost blog, so that it can be hosted properly on static site hosting. The blog post I'm looking for help with is hosted here: http://dresscode.danhakimi.com/why-i-love-belted-coats-and-cinched-waists/. Inspecting elements seems to work pretty effectively, and more effectively than I could copy all the relevant HTML, CSS and Javascript over here. As a disclaimer: I wrote none of this code, and am not a developer by trade, but have played enough with web frontend technology that I should be able to understand most of what's going on.
Aside from one detail I'll touch on later, this works well in Firefox on multiple platforms, and in Internet Explorer. In safari, the images show, but can't seem to set height correctly, at least on my laptop -- at full screen, the images are stretched out, but they respond nicely as I change the window's height. So I'm pretty sure the problem involves the way different browsers process adaptive heights... But I have no idea how to handle that.
The strange thing is what happens in Chrome (on both desktop and android): the images aren't visible at all. I go in and inspect element, and... the only way for me to get images to show is to set the height on kg-gallery-row to a fixed pixel count. Obviously, that's not a practical solution -- I want the heights to set responsively, properly... I've seen a lot of guides talking about setting the flexbox height to 100%, but that isn't doing anything, no matter where I do it.
The last detail worth considering -- although it's a less significant issue -- is that none of the zoomable boxes open correctly, locally or on production, in any browser. They seem to be targeting some area much further down. If you can help with that, I appreciate it, but the priority is just getting the galleries to show.
Per request of an answer:
You can set the height of the image to auto.
.l-post-content figure .kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: auto;
}
It looks like Chrome is setting the container height to 0. So, if you have your image height set to 100%, that means 100% of it's container height - which is 0.
Setting the height: auto will set the height in relation to the image itself. This will also solve your stretching issue.
Related
Chrome and Safari tend to autohide scrollbars and on macOS, it is pretty aggressive. There's a page on our website that has multiple sections and one of them has a scrollbar which needs to be visible at all times. Currently, it is only visible when the user actually scrolls or is actively on the specific div.
I am looking for a way to force the browser to show the vertical scrollbar at all times.
*There are a lot of solutions to this here and elsewhere but most of them don't work as they are outdated. I couldn't find any solutions that work consistently so, in case there's an answer that works somewhere on this site, feel free to mark this as duplicate.
If I understood it right, try this:
html {
overflow-y: scroll;
}
Source
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 7 years ago.
Improve this question
I'm having an issue with a site we launched recently. There's a 25 pixel gap at the bottom of the site that I cannot explain, and I've exhausted all troubleshooting techniques I could think of trying to figure this out.
http://bit.ly/1I2m3ZD
Here's what I can tell you is NOT causing it:
1) There is no margin or padding on the body or HTML tags.
2) The footer does not have a bottom margin or padding.
3) The height of the footer is static.
4) There are no elements within the footer that are hanging outside of the box.
5) When I eliminate the both the footer and the content area, the gap is still there.
6) There are no 3rd party apps installed which would affect page layout (and if there were, any dynamic changes would show in Inspector).
I'm using Firefox inspector to troubleshoot this. Inspector is showing nothing that indicates the space should be there, and when I remove elements one at a time by deleting them through the inspector, the gap does not go away. What am I missing?? Either I'd like to learn how to use inspector for troubleshooting better (because I'm obviously not troubleshooting effectively), or I'd just like to find out what could cause this gap and not show up when I try to hunt it down.
I should elaborate. The problem is caused by the code <iframe name="google_conversion_frame"...
Because this iframe is in the flow and has layout, it is being added at the bottom of the page and adding the space. Your best bet would be to apply a style to it, giving it position: absolute; and a left: -5000px; or similar style to remove it from view.
There seems to be an iframe at the bottom of your site named 'google_conversion_frame' causing the added spacing. I would suggest adding the following to your CSS:
iframe[name="google_conversion_frame"] {
height: 0;
clip: rect(0, 0, 0, 0);
visibility: hidden;
position: absolute;
}
I have heard that using display: none can cause issues with iframes and tracking pixels but that information may be outdated and so display: none may be fine.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Edit: Resolved. Rather than resetting the Zoom to 100%, the "View < Actual Size" resolved the issue.
I've been having an issue with Chrome rendering divs as fractions and not exactly as the specified numbers.
For example:
HTML
<div class='tile'>foo</div>
CSS
.tile {
background-color: #CCCCCC;
border-width: 2px;
border-style: outset;
display: table;
float: left;
}
Rather than being rendered as 2px, the border-width is "1.8181817531585693px" inferred both from the Chrome Developer Tools > Elements > Computed and using the debugger with jQuery .css function.
A few additional things to note is that this only happens when it's loaded on an FTP, not locally. This issue also doesn't occur in either Firefox or Safari. Any ideas or explanation as to what exactly Chrome is doing, or the solution to it would be much appreciated. Thanks!
The short answer is they are dealing with real numbers that are binary internally, and things must be done quickly.
So some numerical corners are probably being cut, that are normally not noticeable to the average web page viewer, that is if a page is designed so that it is not noticeable.
Go figure, I know, you would think that browsers would be more accurate, but I have found that even with the most careful and detailed control of my css, there seem to be rounding errors that play havoc with small details when displayed.
First, I would suggest you use em rather than px. I know you might have to start over with your css, but I have found it to be more reliable, screen to screen. Remember modern pages are not based on pixels. They are dynamic beasts that can be zoomed in and out, and squished narrower and still must output something reasonable.
Also I would suggest rethinking how you are laying out your page so such small details are not an issue. In carpentry the skilled artisan knows how to hide the rough edges with a molding.
I have a very accurate web page I use to generate to a special printed flyer. It was a royal pain to force html and css into something they didn't want to do, which was be accurate.
Also I can test my production site on the 5 major browsers, right on top of each other so I can see little differences when I switch between them, from one browser to another. They are all off just a little from each other in various ways, and really there is no way to make them accurate.
I'm having a little problem with the auto-resizing feature!
I've already proficiently triple-checked (with the search-tool) that all my width-settings are set to %. There's nothing with a fixed width in the whole website. (Well, in fact yes, but nothing bigger than 100px, and in such case, not more than one per row).
But still, if I reisize the browser's windows by less than 420px width, the width of my body (html-body, of course :P) will stop by 420px and the well-known h-scrollbar appears.
Any ideas? Is there some sort of default-minimun-width? I've tried by setting a smaller body's min-width but with no results.
Just in case that's somehow helpful: the website is composed of an index (in html), two sets of three jQuery-script and one CSS files, which are alternatively wrote to the project when the site loads (one for desktop-browsers, one for mobile). I've already tried building the sites separatedly, with no better results.
I think I resloved problem with Firefox. I think FF allows to shrink website to minimal width which need toolbar with website address, searcher, bookmarks and so on. I was testing on CSS tricks which is great site if comes to mobiles :)
At the first screen at 280px width toolbar stops shrinking as the website. Sometimes I have there also Firebug icon or Fireftp icon which makes my sites stop shrinking earlier.
But right click on toolbar and unchecked Toolbar menu. Menu should hide and site still shrinking on resize. Here is Firefox and Chrome and as you can see they are quite similar as comes to minimal width.
If anyone will notice that this soultion is wrong and didn't work, please give me a feedback :)
I run a site using a liquid tri-column layout with a header. The layout runs nicely for more than a decade with all browsers I ever dared to try. It is based on absolute positioning in CSS. This page provides an example of the actual site.
Watching the page from my tablet I found that the right column overlaps the center matter. Further investigation using Firebug showed that once the center content reaches 360px width, the right margin of the div shrinks. Why is that? Since Firefox and Android render the same, I guess that this is something, which is actually supposed to be.
However, I tried to make virtue out of necessity and experimented setting min-width for body and content and made the body scroll overflow. The body actually scrolls, but the right column is positioned on the right edge of the viewport instead of the body element (Firefox). Is this intentional CSS standard?
Any ideas how to solve the presentation on small displays?
Thanks for your efforts,
– lars.
I pondered a while whether I should revoke the question or provide this self-answer. I decided for the self-answer since I wished some of the answers in related had been presented when I wrote the question.
First the 360px limit apparently is my own stupidity. There is a comment form, which refuses to shrink. It scrolled out of my view.
The issue of the wiered positioning had been solved by adding position:relative; to the body. The reason is explained in this question.
The overflow setting I used during experimenting is not necessary, since the default behaviour scrolls already. But using any overflow directive wrecks IE8.
So thanks a lot, the pool of answers finally had it all.