Jump to content

ryanbrinkerhoff

Member
  • Posts

    24
  • Joined

  • Last visited

Everything posted by ryanbrinkerhoff

  1. Anyone figure this out yet? Is Squarespace listening?
  2. @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!
  3. @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?
  4. 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 }
  5. @Ziggy I think I figured it out! Thanks for all your help!
  6. @Ziggy I have a TON of custom CSS going on so I will take a look and see if there are conflicts! Thanks!
  7. @Ziggy Things are still off-center. Any idea why? desktop (good), tablet, and mobile screenshots are attached!
  8. @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!
  9. 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!
  10. @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:
  11. 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.
  12. 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; }
  13. My anchor links not working on mobile. They auto scroll, but scroll a little too far for each section. I tried messing with the code block margins but it seems to scroll to the bottom of the block, not the top. Help! https://www.grdowntownmarket.com/
  14. Thanks! It still needs a ton of work, but it's getting there. I appreciate your expert help! - Ryan
  15. https://www.grdowntownmarket.com/ currently I have figured out how to hide the first slide that is formatted for desktop, and show the mobile version on mobile. But now the scrolling is off! I think this is due to hiding the whole slide, and not just the image within the slide.
  16. Trying this but it is not working. It hides all images in the slideshow. Once I figure out how to address JUST this first image, I will be able to figure this out! Thanks for the help. /* Hide first slide */ section[data-section-id="64d029396c94d354c575f3ed"] .list-slideshow-image:first-child { display: none !important; }
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.