I'm having troubles with some css distribution using flexbox or grid layout, here's the thing: I have a container with the next disposition (75% input, 25% button): That disposition should be the main disposition in desktop and large screens. However,…
I've been working on a simple product page to practice and better understand key concepts. However, I'm encountering an issue with the .carousel grid inside a media query. The first element renders with a width and height of 0x0, and…
I am trying to have two columns in landscape mode or one column in portrait or landscape mode on phones. For some reason I am getting one column on my iPad Pro when in portrait mode. Can anyone help me…
About this code (I found a similar code on the Apple website): <picture> <source srcset="1.jpg, 1_2x.jpg 2x" media="(max-width: 734px)" /> <source srcset="2.jpg, 2_2x.jpg 2x" media="(max-width: 1068px)" /> <source srcset="0.jpg, 0_2x.jpg 2x" media="(min-width: 0px)" /> <img src="0.jpg" alt /> </picture> Question…
When I made a website design using HTML and CSS it was working for large screens but when it comes to media query to make it responsive for small screens and medium it showed a lot of white space and…
Since I don't know a way to style a web component with parent lightDOM class selector to choose which is the theme selector (light or dark) i've found a way to choose it via custom property: The HTML page <html…
According to the MDN Web Docs, aspect-ratio should be able to be applied to @container. Unfortunately I cannot reproduce it. The context is that I want to fill an element with dynamic aspect ratio completely with an image. I explicitly…
So here is my entire code of webpage and the problem I am facing is that when I run the program it works fine but I want to make it responsive, where I am stuck in a problem. HTML ------------------------------------------------------------------------------…
So, I have a little bit of a weird idea. The background image for the landing of my (work in progress) website is a building I made in blender, and my idea is to put a simple div exactly over…
So this is my code const mediaQ = window.matchMedia("(max-width:500px)") mediaQ.addEventListener("change", function(){ if(mediaQ.matches){ document.getElementById("box").style.backgroundColor = "blue" } else{ document.getElementById("box").style.backgroundColor = "red" } }) #box{ height: 20rem; width: 20rem; background-color: red; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,…