iPads/iPhones: problem with my Homepage
Hello everyone, first time poster here!
So I'm a potter who has some html/css/js experience and I decided to challenge myself and redo my website from scratch, often following Kevin's tutorials for support.
Anyway, it's online and working pretty good except that my homepage has content that can't be scrolled on iPads and iPhones. There is content under an image slider that serves as my hero section, as well as the footer. I don't have either of those Apple devices, but I was able to confirm the problem with several friends who do. I thought it might be Safari, but the problem exists in other browsers as well! However it's not a problem on Android tablets or phones as far as I can tell, my homepage behaves as expected. On the iPads and iPhones the other pages of my site work as intended: the content is scrollable all the way to the footer.
I have no idea what could be causing this since it works on many other devices including iMacs and other Mac laptops. The address is https://www.patrickduclos.ca/en/index.html Any clues or insights you may have would be greatly appreciated as I am at a loss here. I checked using the devtools on my Win PC or Apple products emulator websites, but they all show my homepage as working fine....
Anyway, it's online and working pretty good except that my homepage has content that can't be scrolled on iPads and iPhones. There is content under an image slider that serves as my hero section, as well as the footer. I don't have either of those Apple devices, but I was able to confirm the problem with several friends who do. I thought it might be Safari, but the problem exists in other browsers as well! However it's not a problem on Android tablets or phones as far as I can tell, my homepage behaves as expected. On the iPads and iPhones the other pages of my site work as intended: the content is scrollable all the way to the footer.
I have no idea what could be causing this since it works on many other devices including iMacs and other Mac laptops. The address is https://www.patrickduclos.ca/en/index.html Any clues or insights you may have would be greatly appreciated as I am at a loss here. I checked using the devtools on my Win PC or Apple products emulator websites, but they all show my homepage as working fine....
Collapse Nav (Broken)
Here's my current code: https://codepen.io/Matt-CopOffMatt/pen/eYXJBpN
Currently, I'm having issues with my functionality for collapsing by clicking outside of the menu. The following check:
```...
JavaScript.
This code opens a navbar menu. How can I make it so that when I tap the same button it will be close?
Please explain to me in a way as if you are explaining it to a beginner. Because I am a beginner 🙂 . If possible, show me a better way of doing this....

Relative Path's for background-image URL
Hey guys, can anyone help me understand why only the first url path is working?

i need a little help with svg
i want the shadow to appear under the vector not under the fulll box is there a way to do that

Code or no-code
Hi! Just joined. Studying backend and learning frontend on my free time to become full stack. Just learned HTML and CSS, working on jS (know the basics, now just going DOM and web specific things). I understand the importance of knowing how to code and how everything works to have a good foundation for everything else so I’m planning to make a couple more pages just using HTML and CSS and push those to the limits of their capabilities, but wondering for the future what is the best/most popular/m...
Fixing infinite scroll animation bug
Hi everyone, newbie web developer here. I'm building a website using Tailwind CSS and Vanilla JS in which I've created an infinite scrolling images based on Kevin's video here: https://www.youtube.com/watch?v=iLmBy-HKIAw
I've made some personal changes to it and now would like to add an additional functionality whereby when you click on the arrow buttons it will change the images shown. The issue now is that the JS script that I've added messes up the animation so when the images loop, there's a noticeable 'jump'.
I initially encountered this when I was changing this from horizontal to vertical but I managed to follow along Kevin's instruction to fix the issue as he encountered this issue as well in the video. But for the life of me I can't figure out what's wrong here. ...
Scroll animations relation to overflow
Kevin's video on scroll animations was really fun, and I have been implementing some progressive enhancement on my sites. I am, however, running into a weird quirk. I couldn't figure out what was happening until I installed the scroll driven animation Chrome extension.
For these examples I am using a simple
.fade-in
animation†. This works well for the post-card
s I have on the home page††, but not for img
's†††, and I figured out it's because I have overflow: hidden
set on a parent element in the DOM.
†https://github.com/frankstallone/frankstall.one/blob/main/src/css/animation.css#L1 ...Applying Radius to Clip Path. Need Help
Hi everyone I need help to create this but I failed every time to create this in html and css
I dont want to use svg Instead I use clip path but no radius is applied to it please give me the solution...

How to use Google Calendar API to fetch events without final user authentication
Hello,
I would like to implement on my portfolio a page that allows user to see my google calendar and book an event to my calendar.
I'm using Next.js and the library FullCalendar. My idea was to fetch all events from Google Calendar API and feed them into FullCalendar. But it seems that you can't fetch all events from a calendar without calling the authentication method, but from what I get, the authentication method open a popup and allow the final user to connect....

Ellipsis without fixed width
I want to show the description on one line and add ellipsis at the end.
With
overflow-hidden overflow-ellipsis whitespace-nowrap
, I have to set fixed width which distorts the layout of the table.
Is there a way to do this without setting fix width....
Create an underline effect using clip-path and svg
Happy new year to everyone!
I've been working a lot with svg, maybe not in the best way, but lately I've discovered the clip-path property and now I'm trying to figure out how it works.
I'm trying to add this svg -that pretends to underline some words-to a <span> that wraps the text that I want to underline, which is inside of an h1 tag.
The problem is that I can't see the svg, no matter which way I try....

FrontEnd Mentor Challenge - How to fix background image property.
Hey Guys, I'm trying to solve a challenge from FrontEnd Mentor, now at the final fase, I'm trying to add the 2 background images as you can see on the screenshot I upload it. How can I make the bottom right image to span all the way to the bottom and be responsive?
https://codepen.io/Almopt/pen/ExMVdWW...

Container - grid area - Naming
Hello!
I watch Kevins video's almost every day in lunch time and i'm amazed by some solutions :)! Thanks
I'm working on my base theme and looking into the video about "Grid area container" but im not sure yet if i want to apply these code. I'm talking about this video: https://www.youtube.com/watch?v=c13gpBrnGEw...
I cannot understand this.. kindly help
I want the blue and red boxes to align with like colours beneath but there seems to be this gap that always persist (even with gap 0). and it seems impossible to center this entire layout vertically (the entire layout , without 100% height of viewport). Can someone explain why and suggest some possible solutions with explanations? I hope you kindly cooperate since i am still on my learning phase.

React SEO
How I can create seo optimized website with react or make the existing react website seo friendly?
Stop CSS fading when scrolling?
I added a fade effect to the bottom of a scrollable div with text to emphasize scrolling, but the idea is that when you reach the bottom, aka, there's no more text, I want that fade to cease. I tried the animation-timeline property but I'm not getting any results, any ideas?
I used the following code
`body {...

Resize screen issue
So the first picture shows how it looks regualrly. But when I resize my screen to smaller the text starts getting out of range like this picture

Layouts
I'm new to front-end, it's been a month so far.
When I look at this, I struggle to approach it. Do I use two boxes? Right now, I'm learning flex-box.
Conclusion: I'm struggling on how to do layouts....

Help with highlighting a singular list element on click.
Click target is highlighted, while other elements, if they were ones being highlighted beforehand, lose it.
JS in this example is what I was suggested to do here some time ago:
https://codepen.io/DovahTheKiin/pen/WNmQOqM
...