-
Posts
-
hi guys
Can I draw your attention to https://paymonthly.click/our-work/
So I’ve a portfolio page for showcasing work… I’ve used the grid layout element on this page to show case images of identical dimension that are 953 x 635
For some reason in chrome a small white gap was appearing under my image on the right hand side. I had no padding, no margins set and all the settings are identical for both columns.
Additionally the identical image is being used to rule out an image issue.
Now the issue is the container on the left hand side 1/2 is 953 wide, how ever the one on the right is 952.. Which is incorrect as they should be of equal width.
I know this issue is only very small but it results in a 1px white gap between each image on the right and it ruins the grid effect.
This url https://imgur.com/a/UbJDL
is a screen shot of my element inspector in chrome, it is in fact 2 screenshots and if you look closely you can see the pixel dimensions chrome is reporting and they are not of equal width or height.Please can you advise how to resolve this problem
Hey codecreative,
I am not getting any margin/padding in Chrome on a MAc. Is it happening on a certain screen size?
Best regards,
Victoriahi it is happening on various screens, including the native 13 inch macbook pro screen
if you look at this imgurl https://imgur.com/a/TPfZ1
you can see both screenshots and they show you both pixel dimensions of each box and you can see the two are not even in width, in the black box it indicates the size in pixels of each segmented area
its crazy i cant understand why, it doesnt do it in safari just chrome browser but it makes an unsightly gap
so it is doing it on different screens
i dont know why the theme isn’t functioning properly
Hi codecreative,
Ok, after some investigation, I notice that when the screen size is odd, there is 1px difference in the width of the element and so the height adjusts too. When the screen size is even, there is no gap.
Best regards,
VictoriaHi Victoria
Yes you are correct. I can see this now if I slowly drag the screen out and in.
This must be only how chrome intereprets 50%. It should make the width’s of the containers use decimal points.
Because I can resize them using element inspector to use .5 and it works fine.
Is there a css setting we can use that won’t round the pixel length when 50% is used and will use decimal? That white gap is a bit ugly especially as it is for a design website.
Worse come to worse how can I change the background colour from white to something else?
Here is an example of a site using 50% width for each portfolio item on chrome and on all my screens it renders 50% correctly. With decimal points in the pixel width handled correctly when inspected by element inspector
The css shows they put width 50% and pixel calculation is accurate.
What have they done different to be successful to overcome this?
Example of it working properly
http://ahoy.co.uk/work/if you scroll down my page you can see using html inside a code block ive got an even 50% column working but how can I make it span the full fluid width of the page like the images above ?
okay progress is being made slowly
ive made using custom code block a four image grid, ive test in element inspector and it each image is of equal proportions…
which indicates the method used abouve with the native avia plugin must have an issue with pixel rounding possibly using divs? Worth confirming from you guys
How ever a new issue is that there is a white gap in the middle running through each pair of images,, can anyone offer some css to remove this as I can’t see why it is there
Hi,
The counting has some issues
1. The grid is not pixel but % so it is responsive
2. There are borders
3. There are paddingsThe issue is that what you want to achieve is almost like ” braking ” the grid, to bring the result, it is really tought as there are multiple things to be controlled at once
Best regards,
Basilis
- You must be logged in to reply to this topic.