I am encountering a problem with making my background image responsive, specifically on screens with a width of 768 pixels or less. The background image appears to be getting cropped more and more as I resize the screen to smaller…
I have a table like this: <p>On large screens</p> <table> <tr> <td>1</td> <td>3</td> <td>5</td> </tr> <tr> <td>2</td> <td>4</td> <td>6</td> </tr> </table> Is there a way to modify it purely with CSS to LOOK like this? (a single column where every…
Consider the snippet below, where I've created a basic chat window. The issue: When you focus the input on a mobile device, the entire page is shifted up, pushing the header and messages out of view. The goal: When you…
I am trying to create a hamburger menu in mobile view. When in mobile view the nav-item gets hidden and when i click the menu icon the nav-items will be displayed. But after clicking on the icon and changing the…
I have a container which I want to hide when screen is less than 1000px. css .desktop-links { display: none; } .active { display: block; } .in-active { display: none; } JavaScript: const desktopLinks = document.querySelector('.desktop-links'); shareBtn.addEventListener('click', () => {…
I have the grid, each element has an image and other divs underneath. Because it's a grid, each element has responsive width and so it scales automatically as the screen shrinks. I would like the images (which can have different…
I have a website that includes header images. However these header images do not seem to load at first when I load the website in Firefox or Safari on iOS. Here’s a screenshot: This is the code for the header…
When I run VScode live server, the whole page is too large and I don't have a responsive web page however in DevTools it work just fine. This is how page look in my screen This is how it shows…
On desktop there are 4 columns next to eachother, on tablets only 2 columns next to eachother. Somehow the 2 columns won't get aligned how they should be. I'm using 12 columns in total. col-x is for desktop, col-s-x is…
We re trying to customize an element on my WordPress website but it's impossible. I'm trying to paste it into custom CSS into my WordPress website because the image is not responsive for mobile but it's not working. from @media…