ryanbrinkerhoff

Anyone figure this out yet? Is Squarespace listening?

@Ziggy Oh my gosh I think this is going to work! Thanks!

@Ziggy @tuanphan Does anyone have any other suggestions on what to do about the range between 520px and 767px? There has to be a way to tweak things, right? Thanks!

@Ziggy Thanks! I adjusted my breakpoints but it still seems to snap to mobile view and look weird. Large vertical gaps between elements and misaligned objects. See attachments. When I keep scaling the browser window, it eventually displays the correct mobile view at 520 px. What do I do about the widths between 767px and 520px? Is there a trick to tweaking things in that range?

https://www.grdowntownmarket.com/ pw: Market4321 My website looks fine on a desktop, iphone, and ipad. When I reduce the width of my Chrome window to 767px, a messed up version of my mobile site is shown, even though my CSS defines mobile view to occur at 640px. Is there a way to avoid the mobile site showing on desktop? It's frustrating because I thought I had all my bases covered. CSS code parameters: //mobile code @media screen and (max-width: 640px) { Mobile code here } //tablet code @media screen and (min-width: 641px) and (max-width:1080px){ Tablet code here }

@Ziggy I think I figured it out! Thanks for all your help!

@Ziggy I have a TON of custom CSS going on so I will take a look and see if there are conflicts! Thanks!

@Ziggy Things are still off-center. Any idea why? desktop (good), tablet, and mobile screenshots are attached!

@Ziggy Close but it's still off. Trying to have the text container and button centered in the window at all times other than desktop view. I appreciate your help!

@Ziggy Added to the original post! Thanks!

https://www.grdowntownmarket.com/ Site password: Market1234 I'm trying to center the homepage slide show text and button for tablet and mobile, but here's the catch: I want it centered as soon as it snaps to the tablet width and stay centered the entire time you continue to resize your browser window. Any help would be appreciated!

@tuanphan I appreciate the help. I can't get it to look right when the window is at its widest, around 1,300px. I'd like the map to be positioned further to the right: When the width of the window is reduced, the map gets cropped instead of scaling. Here's 1,000px: 730px: 517px:

Thank you. @tuanphan Is there a better way to make the image responsive than I currently have it? I've experimented with "max-width: 100%" and stuff like that with no success.

URL: https://www.grdowntownmarket.com/market-hall I have successfully figured out how to add an image to the text in an accordion block, but there has got to be a cleaner way to format the image/make it responsive. I know this code is a mess, so any help would be appreciated. Right now it does not scale well when the browser window is resized. CSS: //accordion margin-left #dropdown-block-yui_3_17_2_1_1659644612474_6655-0 { margin-left: 72px !important; } // Add an image into Accordion Content /* nth-child(1) is first accordion item, nth-child(2) is second item... */ /* :before is image on top, :after if image on bottom */ #collection-62b7504d182c361584382f1c li:nth-child(1) .accordion-item__description:after { content: ""; display: block; height: 800px !important; width: 800px !important; //accordion MH map background-image: url(https://static1.squarespace.com/static/62b0db0c1be03b40824ca350/t/64de3cf0725d4746c95b9c9f/1692286192924/mh_map_final_bw.png); text-align: center !important; scale: 61%; /* ie8 */ margin-top: -680px !important; margin-left: 120px !important; padding-right: 40px !important; padding-bottom: 40px !important; background-repeat: no-repeat; background-size: cover; margin-bottom: -160px; } MOBILE CSS: //accordion margin #dropdown-block-yui_3_17_2_1_1659644612474_6655-0 { margin-left: 0px !important; } #collection-62b7504d182c361584382f1c .accordion-item__dropdown { padding-top: 340px !important; } // Add an image into Accordion Content /* nth-child(1) is first accordion item, nth-child(2) is second item... */ /* :before is image on top, :after if image on bottom */ #collection-62b7504d182c361584382f1c li:nth-child(1) .accordion-item__description:after { content: ""; display: block; height: 830px !important; width: 830px !important; //accordion MH map background-image: url(https://static1.squarespace.com/static/62b0db0c1be03b40824ca350/t/64de3cf0725d4746c95b9c9f/1692286192924/mh_map_final_bw.png); width: 500px; height: 500px; text-align: center !important; scale: 38%; /* ie8 */ margin-top: -1108px !important; margin-left: -265px !important; background-repeat: no-repeat; background-size: cover; margin-bottom: 240px; }

It worked perfectly! You're the best!