MN88-MI

Hello I am having the same issue. All of the sudden all images show blurry on mobile. These images have been up on the site for a year and never had a problem until now. No problems on desktop. Any clue what changed?

Many thanks, this worked.

Site URL: https://duelle.studio Hello, does someone know how I can move the bottom two menu items side by side at low level as shown in the image attached. The items I want to move are @duelle.studio and hello@duelle.studio. I would like them to be placed in the bottom corners of the menu when open as shown in the image attached where I sketched the black and orange rectangles for position reference. Many thanks,

Site URL: https://duelle.studio/services Hello I am having a problem with the background image of two pages only. When in mobile landscape only , opening the burger menu, the background image scales down a little. then scales up again when I close the menu. I want the background image to stay always at the same size no matter opening or closing the burger menu. I do not have this problem on other pages. Only on these two: pages : https://duelle.studio/services , https://duelle.studio/form I am struggling to figure out what is going on. it's an open page. Many thanks in advance for the help.

Thank you. This code worked. I also had to change the size of the image itself to have it still showing at fullbleed. But it seems all fine now.

Hi , yes the link is above the question text. but here it again Site URL: https://duelle.studio/about the page is public. More than a problem, it is more that I would like to add something to it. Instead of one image only when viewing in mobile, a possibility to have a second image coming up when clicking or after a 5s time frame. thank you.

Site URL: https://duelle.studio/about Hello everyone, I have this code in my CSS as I want to have a specific image for mobile portrait view only, different from what I have in mobile landscape or screen mode. However to this code I would like to add something that makes me having 2 images alternated instead of only one. Either as in a slideshow of 5 s each, or click to change. This only in mobile portrait mode, without affecting any of the other modes. Thank you in advance to anyone who can help me out. @media screen and (orientation:portrait) { #collection-61dc4529fdc5342366fa9b80 .gallery { background-image: url("https://static1.squarespace.com/static/5ff072b1fbf14e2399f4cb8f/t/610c24c8d375ab3084be62f6/1628185800802/Duelle+text+%2B+circle+mobile+version.png") !important; background-repeat: no-repeat; background-size: 90% ; background-position: center; img { visibility: hidden !important;} } }

Site URL: https://duelle.studio/about Hello everyone, how do I scale the image I am using to a 90% size only when in tablet mode landscape keeping it always full bleed? See image below to see the weird crop on tablet landscape mode. I had this but it doesn't do the right thing, only cropping the image rather than scaling: @media screen and (max-width: 1200px) { #collection-61dc4529fdc5342366fa9b80 img { width: 80% !important; } } I have tried this too, but it doesn't work either. it just creates an empty band at low level. //smaller image in tablet mode @media screen and (max-width: 1200px){ #collection-61dc4529fdc5342366fa9b80 img { width: 100% !important; height: auto !important; } } page : https://duelle.studio/about Thank you in advance to all for the help.

yes thank you, I achieved what I wanted from the original question. I have now a couple of other things that bother me on the same page/code. hope you can have a look. this is the code I have now which is fine : @media screen and (orientation:portrait) { #collection-61dc4529fdc5342366fa9b80 .gallery { background-image: url("https://static1.squarespace.com/static/5ff072b1fbf14e2399f4cb8f/t/610c24c8d375ab3084be62f6/1628185800802/Duelle+text+%2B+circle+mobile+version.png") !important; background-repeat: no-repeat; background-size: 90% ; background-position: center; img { visibility: hidden !important;} } } FIRST QUESTION: Is there a way I can have two images, one after the other as in a slideshow or reel, as addition to this code above for mobile only portrait view? I still would like both text image and people photo to be visible in mobile portrait view if possible. For tablet landscape view instead I would like to keep the original image I use for laptop/large screen view, which is the full bleed landscape image (half made of people photo, half of text). But I can't figure out how to scale only the image itself down a little so it doesn't crop text and faces when viewing it in tablet screen landscape. I would like a code targeted to the image itself which just fits the image to the type of screen without cropping it SECOND QUESTION: how do I scale the image I am using for landscape mode to a 90% size only when in tablet mode landscape keeping it always full bleed?Alternatively, how do I visualise the image without being cropped at all in landscape tablet mode? See image below to see the crop on tablet I had this but it doesn't do the right thing, only cropping rather than scaling: @media screen and (max-width: 1200px) { #collection-61dc4529fdc5342366fa9b80 img { width: 80% !important; } } I have tried this too, but doesn't work. it just creates an empty band at low level. //smaller image in tablet mode @media screen and (max-width: 1200px){ #collection-61dc4529fdc5342366fa9b80 img { width: 100% !important; height: auto !important; } } duelle.studio/about the page is public Hope you can help. Thank you so much.

thank you. It worked but I had to add something targeting the footer anyways as the other image was still there. It works now. @media screen and (max-width:767px) { #collection-61d46ba2f63bf04e32662458 .section-background { background-image: url("https://static1.squarespace.com/static/5ff072b1fbf14e2399f4cb8f/t/610c24c8d375ab3084be62f6/1628185800802/Duelle+text+%2B+circle+mobile+version.png") !important; background-repeat: no-repeat; background-size: 100%; background-position: center; img { visibility: hidden !important; } } } @media screen and (max-width:767px) { #collection-61d46ba2f63bf04e32662458 .content-wrapper, footer#footer-sections { visibility: hidden !important; } }

Site URL: https://duelle.studio/about Hello all, I am having some problems with figuring out how to change the background of a section in a page only (about page in this case) and only when in mobile view. I have tried the code below but the image I want (the black one you can see in the screenshot) only covers a portion of the page/section background. However I want the full page background to change into this image (the black one) when I open the About page in mobile. @media screen and (max-width:767px) { #collection-61d46ba2f63bf04e32662458 .page-section { background-image: url("https://static1.squarespace.com/static/5ff072b1fbf14e2399f4cb8f/t/604cabf3c0df6d442f4ecb6c/1615637492980/210313_DUELLE+Icon.png") !important; background-repeat: no-repeat; background-size: bleed; background-position: center; } } Hope I was clear enough and that someone here can help me out. Thank you. M