Wordpress elementor - Listing grid slider - breakpoint bug - wordpress

Not sure why that happend - even having my breakpoints on 1024/1025 (tablet/desktop) - listing grid SLIDER(because only slider catches bug) breakpoint is 1014/1015 (tablet/desktop). First time this is happening to me and I'm confused - anyone had that problem before and knows what might be causing this problem?

I found the problem and maybe for someone in future it will be usefull.
Problem was horizontal gap bettwen each slide on tablet - it takes default value from desktop (if I don't change it) and it was for some reason too big in my case. I had 40px gap bettwen slides on desktop. I changed it on tablet to 20px since it took desktop value by default(40px). Reducing that gap on tablet fixed my problem with breakpoint screenshoot

Related

Sticky Sidebar - Top Cut-Off on smaller screens

I have problem with fixed, sticky sidebar on smaller screens (14" or 15"). On regular screen I have no problems, as you can see on following image:
Sticky_Sidebar_Desktop
But when I visit same link from device with smaller screen size (14" or 15") I have top sidebar/widget cut-off to half, as on following image (ad area):
Sticky_Sidebar_Cut_Off
Anyone had experience with this? I even tried with JavaScript and CSS, without success, can't produce any reaction or function to help me with this issue. Any advice is more than welcome! Thanx
Tried with combination of JS and CSS I used many times - nothing, tried even with some plugins - no success.

CSS responding slowly

i am having a very weird problem, my CSS is responding very slowly. When i click on a button, it switches the z-index to 500 instead of -999; i can see in console (chrome) that the value has been changed. However it takes 2-3 seconds for it to show up.
When i resize the window i see a white space showing up (the additional space) and it takes a few seconds again until it adapts to the new size.
What can be creating this issue? I am especially confused as simple things as adapting the size to the current screen width (in CSS i used width: 100%) doesnt work quickly.
is there any way which i can do to check what is going on in the browser?
It might help to notice that this error is happening randomly, sometimes it all works flawlessly, sometimes it takes forever.
Im really helpless :(
The problem was a sprite sheet that was too big - apparently resizing and displaying the single elements was taking the additional time.
Using a smaller sprite sheet makes everything work again flawlessly

css - right vertical line displaying on iPhone 5 (on the right side)

My client complains that this page, http://www.lingojungle.com/, on IPhone 5 shows a white vertical line (probably 1 or 2px wide) on the right side of the page. I do not have IPhone 5, but when I try on a browser or simulator, I do not get this line.
First, I need to understand - what causes this line. Second - how to fix it.
Unfortunately, I cannot add many comments here, as I do not see this on any of my devices. I will add more comments when the problem would be clear.
It is .hor-line-home-text class that has a width of 321px applied to it that is causing the issue. Remove the width setting or set it to auto.

Safari Mobile experiencing strange spacing issues

I am about to launch a new Joomla site, and the only minor bug holding me up (not really effecting launch, just annoying) is this strange issue with iPhone (using Safari Mobile). You can see it in the image attached or use http://synthphone.com/ to see it.
Any ideas? I haven't noticed any other issue on any other browser or device. Link to the page is http://www.complisolutions.com/services.
Thanks for any assistance!
It's most likely a font size issue - note the word 'environmental' - looks to me like that cannot fit in the space allocated between the image and the left side of the screen.
Try remove that word to see if this is the case.
What you'll want to do, is use media queries to firstly make that image full page width at small screen resolutions and secondly to remove the float.

CSS issues on site when browser window is a specific size

I'm working on a new website design and I'm having an issue with it. The site is http://www.paulietheboss.com/ - I'm only really focused on the homepage right now till I get this problem sorted out.
I'm trying to make the theme fully responsive, however if you resize the browser window and it gets between ~1027px and ~1065px wide a scrollbar appears at the bottom and part of the right hand side of the site gets cut off - try it and you'll see what I mean - any ideas?
(The width values I listed are in chrome, but the same seems to happen in other browsers at slightly different sizes)
A similar issue happens viewing on an ipad3 in landscape, but I believe it is related somehow.

Resources