I have a banner that I'd like to float in the middle of the page on desktop and fill the screen on mobile. Here's my CSS for media (set up by someone else) } @media(max-width:100%) { height: auto; img#image-6441-60781 {…
I have an image inside the card, the img has 196x196 size. On tablet its size should be 250x250. When I add mixin tablet the image doesn't grow or scale, it just stays 196px and then when the screen is…
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…
Today I tried to make a scroll web-site and at the first load I tried to make visible a header without nothing but with a css background. The background is responsive but I don't know why it doesn't cover all…
So I am fetching the urls from a firestore database and then using those urls for the img tags. However, the issue I am facing is that when the page loads the array is empty but if I make a…
Very amateur, but trying to create a one-image newsletter through Mailchimp with several hyperlinks. Image should adjust responsively to fit displays and map should adjust along with it. Using percentage coordinates to hopefully achieve that. The original image is 1200x6000…
I am trying to understand the basics of responsive images. I have this very simple webpage: http://chubby-orange-fox.s3-website.eu-north-1.amazonaws.com/test.html <!DOCTYPE html> <head> <title>Responsive</title> </head> <html> <body> <img srcset="https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&dpr=0.1&w=2000 200w, https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&dpr=0.2&w=2000 400w, https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&dpr=0.4&w=2000 800w, https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&dpr=0.6&w=2000 1200w, https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&dpr=0.8&w=2000 1600w, https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&dpr=1&w=2000 2000w" title="test image" alt="test…
For example, the following image element with no src tag provides the last image link as the default image when all media conditions fails and load perfectly well in modern browsers. The alt text content will display correctly in case…
I am trying to make my mobile logo larger on our site. The logo is perfect for desktop, but on mobile it is very small, regardless of theme settings I tweak. I tried this snippet in additional CSS without luck:…
I'm creating a Shopify website and I want to show a hero video on the top. But the video is somehow leaning to the right, leaving a blank on the left. Anyone knows how I can make it 100% responsive?…