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 2 years ago.
Improve this question
I have a multicolumn layout where the column on the right will update with the details of the item selected in the column on the left.
At a zoom level of 110% and below in Chrome, the column on the right will be scrolled to the top when selecting a different item on the left as in the gif below (this is the desired behavior).
However, at 125% zoom level and up, the scroll position of the column on the right is maintained when a new item on the left is selected (or worse, appears to scroll to the top, and then back down).
What could be causing this behavior? I am at a loss as to how to even debug this issue. I have tried messing with the overflow on several elements, and have looked through our styles for things related to scroll, but have come up short so far. The behavior doesn't appear to be specific to Chrome, as I am able to reproduce in Safari as well, but strangely it happens at a higher zoom level in Safari.
Your issue could be due to the height of the section which gets varied at different zoom levels. Varying in heights may be due to increase in the width of the section after zooming.
If your current scrolling is achieved through plugins,
then kindly do reload the browser at different zoom levels and check if the issue still continues.
because, most plugins will be configured in a way to effect at page reload only.
If the above mentioned doesn't help, then do share your code snippet or any other info related to the development of this output
Related
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 2 years ago.
Improve this question
I have a problem whenever the website changes its size in any way, whether it be the size of the browser or if inspecting the code in the web browser, any change to the size of the page makes it look really really bad. I only started learning to code last week and I picked up the challenge "social proof section" on frontendmentor.io to practice my HTML and CSS. If anyone could take a look at it and tell me what is causing it I would be very grateful! also, its quite embarrassing posting this here as I'm a total nooby and with having only started learning a week ago, my code is obviously very very bad
website link: https://blakebutlin95.github.io/Social-Proof-Section-Challenge/
Github link: https://github.com/BlakeButlin95/Social-Proof-Section-Challenge/tree/master/css
also sorry about one of the empty codes in the css file, I didnt even realise it existed until a minute ago
You are using absolute positioning ,it is positioned absolutely with reference to the closest parent that has a position relative value , If there are no parent elements that has a relative position, then the absolutely positioned element will take its reference from the browser window.
The problem isn't the resizing of the page. The problem is that you have used absolute sizes. That means when I open the page it looks even worse because I have a different screen size. You have to create different sections and the implement the objects in there.
This is how it would look on a smaller pc.
Here a sketch how to build it properly.
Try to use for horizontal sizing only % and for vertical sizing px.
Use for the boxes the <div> tag.
Sometimes you have to set it to display: inline-block; so that multiple div's will fit on one line.
It is also important to not set a height because it depends always on the device how much space the text will need. Try to use instead more padding.
Update:
A more modern approach would be with flex-box or grid.
It is cause you're using the absolute sizes, this will give problems for different screen sizes. Try looking up flex box and apply it here.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
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.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
Not a Wordpress expert, but reasonably well versed in HTTP/HTML/CSS/Javascript/etc. Customer has a Wordpress site of not recent vintage, and I want to just get in, do the minimal required work, and get out. A page needs an image, so I upload it to the "Media Library". Push buttons and doodads to insert it into page, view the result and... the image looks blurry.
Some hours later, I understand there's a ton of Q&A about blurry images on Wordpress, but AFAICT they have nothing to do with my problem. When I view the image in a browser, it is reliably being scaled up by precisely 4/3 (1.33333...).
What drives me nuts is, I pick a browser, load the page, go into the console debugger, and it agrees both that the image is being rendered at 4/3, but also knows exactly what the correct original size is. Fine, but I should be able to see why it is rendering at 4/3. I cannot locate any relevant CSS parameter that is causing this. I have tinkered with enumerable combinations, including elaborations where I shove the img in a div and set the width of that div, etc. Every single time, the browser calmly scales the image up. In Firefox's console debugger, the "box model" view displays the actual original size rather than the scaled-up blurry size.
I feel I have eliminated PHP and Wordpress by just using Ctrl-U or the browser debugger to look at the result. But apparently somebody has managed a trick I don't understand, so I'm not sure whether to view this as a Wordpress question, CSS question, or what. So I'm flinging this question out in case the magic scale factor of 4/3 rings a bell with someone who immediately knows what the problem is. Let me know if other info is required to locate the problem.
I just checked it in IE11 on a virtual machine running Win10 and it was the correct size. It may sound daft, but are you sure you haven't accidentally enabled zooming in your browser?
This might sound simple-stupid, but sometimes, we all tend to miss something trivial:
While inserting the image/s into page, there is a column called ATTACHMENT DETAILS (extreme right). Down below on this column, there is a Size dropdown. Have you tried adjusting that? HTH.
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 have a problem here with my website. If you can go to my website and click on the cog button on the left side, there are two images.
If you click on the first image, i set it to change .xe-clearfix css style to background-color:white, and for the 2nd image, i set it to change .xe-clearfix css style to background-color:transparent as well.
but as you can see, the menu and the image slider overlap with each other,
so basically what im trying to achieve here is to make the menu on the top of the slider 'push' the slider down, so that none is overlapping when i click on the first image.
(and remove that class when click on the 2nd image of course)
and since I can't copy paste the whole website here, i will simply leave my website's address.
and bare in mind that I use wordpress like CMS called XE,
and the source code might be 'mess' to some people.
but people often say that my webhosting company (cafe24) gets blocked by the ublock or adblock, I assure you that the website is completely safe and there is no harm whatsoever (you will need to disable your chrome's extension for that matter)
Thank you very much.
The others are right that your question is off-topic without a code snippet, but I'll throw some info up since you're new.
Your header/menu element (.header_wrap xe-clearfix menu_type_1) is positioned absolutely. That means it has no affect on other elements on the page.
The element containing the slider (.camera_wrap camera_white_skin) would need to be pushed down the height of the header (about 100px) using margin or other styling. This will not be a dynamic solution as it would need to be recalculated if the header height changes.
Bottom line: This layout would need substantial revision to do what you describe. It might be better to start with a different template that has a fixed, separate header bar.
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
so from what I can tell it seems that display: table-cell isn't working for me in Firefox as it should. In Chrome and Safari it works fine.
Any ideas?
ETA: in the "services-section" there are two columns called "services-half". The left column is supposed to be 400px wide. Works fine in Chrome, but in Firefox that column is only 100 or so pixels wide. Think it has to do with display: table-cell in Firefox.
Since people were saying they couldn't replicate the problem I've decided to upload screenshots from ScreenFly to show how the layout looks different between Chrome and Firefox.
Your basic problem as suggested in comments is that you shouldn't be using a table layout for this. Table layouts are for laying out tabular data, which this isn't.
Browsers have a certain amount of flexibility when it comes to laying out tables as the spec is relatively loose, which accounts for the differences you're seeing on the different browsers. Once you use table-cell rendering, the browser can reapportion space according to its own algorithm.
I would strongly recommend using another layout mechanism such as flexbox, but if you're determined to stick with table layout, you can use style="min-width:400px" to fix your specific issue.
Using position: relative on a table-cell as you have on the right is also going to cause you issues, so you should also reconsider that combination.
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've taken out all of the styles on a page, and I'm still seeing this really odd font border issue. All of the text is really weighted, and I've ran out of things to debug. Here is what it looks like close up:
See the light blue and tan edges? That's what it looks like close up, but at 100% it just makes all of the text look really dark and weighted. Oddly enough the only fix I've been able to find is changing the z-index of a certain element(a header), but that won't work for the long term b/c it renders the header unclickable. I'm using Chrome 36 on OSX, and it turns out that this occurs even with as simple a page as:
<html>
<head>
</head>
<body>
link
</body>
</html>
Anyone have any idea?
That's not a border, that's the lcd smoothing algorithm. It works by assuming a particular orientation of RGB cells on the LCD monitor, so it can turn on e.g. 1/3 of a pixel at a time for a "smoother" font. You can turn off smoothing in Windows by disabling "ClearType", but know that your viewers are likely to have it enabled.
References:
http://szafranek.net/works/articles/font-smoothing-explained/
http://www.davidjnice.com/articles/windows7_disableClearType.html