Why it breaks?
Hey i am doing this simple scroll animation, but it breaks when is already finish, anyone have an idea about what would be the problem?
Shakey header on hamburger menu click
Hi everyone,
I am working on a website, I have done the layout for desktop and mobile. The desktop header looks okay but on the mobile my nav list disappear on click and my header is Shakey
...
CSS Media Queries and Responsive Font Sizes Not Working as Expected
I'm having trouble with making my text responsive and applying media query rules correctly. The media query rules for changing the background color of the body element do not seem to be applied. The font sizes for h1 and p elements do not appear to be responsive as expected.
Any help or suggestions would be greatly appreciated!
Here is my code: https://jsfiddle.net/3sjboL14/3/...
How to deploy a website with JSON Server and React
I have a react page which utilises JSON Server. This decision was made due to the client's request and we cannot change the method. I am trying to keep it only as a frontend project and trying to not include backend material. I tried to import JSON Server in an express file. But it brings up an error of module not found. I looked deep into the error and found that it is ES6 issue but i cant fix it . Then i tried using concurently which runs both npm run start and npm run server but also dosen't do anything.
{
"name": "christ-church",
"private": true,...
Help for Create layout
I'm trying to create a layout where I have a sidebar that meets the following requirements:
1- The sidebar should be fixed in position, remaining visible while scrolling.
2- When the sidebar is expanded, it should automatically push the main content to the right. Conversely, when collapsed, the content should shift back to its original position....
How do you fix this problem that happens when I try to build my css project after getting a kit
hello, im extremely new to vsc and i need a help with a issue ive been trying to fix for the past 3-4 days. pretty much i am trying to build on a vs kit that is on css, and anytime i try to run or build, it would either configre the code for a infinite amount of time, or give me one of two errors;
***css
No CMAKE_CXX_COMPILER could be found'.
2.- Visual Studio 17 2022
could not find specified instance of Visual Studio:...
Is 'sizes' required when using w in 'srcset' ?
MDN says so, although I see a lot of real-world examples that do away with it.
What happens when no 'sizes' is present. Will the browser completely ignore the srcset, or pick a size based on the current layout size of the img element (scaled by the display density) ?...
What are some useful things I could make using XML/HTML?
I'm trying to make some useful things to post on GitHub using XML because i'd like to practice it a bit more often. I got a dead mind.
How to define max width of flex grow container
I right now have a flex grow child container with some overflow in a parent container with display flex. The overflowing container also has a sibling with a set size, and so the size of the overflowing container is not set but defined with flex grow. Though when i do this the container seems to completely ignore the parents height and width constraints. I've recreated it in js fiddle like so: https://jsfiddle.net/5kjoqdzy/32/
Help with responsive navbar menu
https://codepen.io/griffnsh-the-vuer/pen/qBzrxoG
Trying to get good with mobile first and toying around at work since it's slow today.
Took me a min to get show-menu to get added to the menu from my JS and after I finally got that working now the active menu background doesn't seem to hit the same height that my nav items should be creating, I'm sure it's something really dumb I'm missing but wanted to see what y'all think...
How do I make this part?
Hi guys, hope you are doing well. I was wondering, how do I make this part? I used positioning, but it then becomes trash in responsiveness. So, how do I make it without using a grid? I have also tried giving negative margin. @Chris tried his best to explain to me how to overlap images using a grid, but I just can't seem to understand the concept without a video. If anyone has a video on that, please provide it.
CSS Grid footer columns layout wrapping
Hey! Iโm working on a site for a client and I hit a massive roadblock with the footer. See attached screenshot of Figma design. On smaller screens itโs straight forward, the columns just stack. However, the problems start with larger screens.
Hereโs my attempt on Codepen: https://codepen.io/Framboos/pen/wvLJewP
The first and last columns are static and will stay the same (first has a logo and social media icons, last has newsletter signup form). However, all the columns in between come from a CMS, so thereโs no telling how many will there be and how many items will they contain, so the code has to be as future-proof as possible....
Best practice to style standard HTML elements with TailwindCSS?
I am exploring Tailwind atm while learning Astro. TailwindCSS is removing all spacings, sizings and formatting of HTML elements by default, so you can use your own system.
What is the best practice to style repeating elements like <p> or <h1> elements when using Tailwind?
should I use @apply in my stylesheet?...
Confused why certain elements aren't full-width in display: block
In this example:
```html
<div class="foo">
Bar <button>Bazz</button>
</div>...
Screen Size Warning Modal
Hello everyone, I am working on a website that will be used almost exclusively on ipads, laptops and desktops. I want to at least warn people who go to it on a phone that it's not optimized for mobile devices. I watched a video from Kevin and another one that both used a dialog element when an open button was pressed. I want my warning modal/popup to come up on load or seconds after it but only for users on a phone. So I have media queries setting it to visible or not visible depending on the screen size. I wasn't able to do it with display none/flex because it was messing with my javascript. Now it's fine on mobile, but on larger devices, the invisible modal is blocking me from clicking any links on the nav bar. I'm not sure of the best way to do this, especially in an accessible way. I know I can use z-index with display: grid, but as I mentioned, display was messing with the javascript to open/close it.
Here's a codepen where I reproduced the issue. https://codepen.io/MathematiCode/pen/PorpqGZ
You can see the links can't be clicked at larger screen widths because the invisible modal is in the way....
bottom animation don't work
Hey !
I don't know why it doesnt work. Can you help me please ? Thx.
```html...