The screens in my IOS device doesn't reload after clicking the back button. It works using PC and android devices. Is there specific reload code for IOS device? here is my code ``` <script> document.addEventListener("DOMContentLoaded", function() { var goBackButton =…
*{ padding:0; margin:0; } a{ text-decoration:none; color:black; } ul{ list-style:none; } /* Uppermost bar */ #upper_bar{ min-height:10vh; max-width:100vw; background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); /* background-color: rgba(0,0,0,0.3); */ color:black; display:flex; justify-content: center; align-items: center; font-size:2vw; } /* Header */ header{…
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…