ryanbrinkerhoff
-
Posts
24 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by 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 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!
-
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!
-
Adding an image to the accordion block
ryanbrinkerhoff replied to ryanbrinkerhoff's topic in Customize with code
@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:
-
Adding an image to the accordion block
ryanbrinkerhoff replied to ryanbrinkerhoff's topic in Customize with code
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; }
-
Anchor links not working on mobile
ryanbrinkerhoff replied to ryanbrinkerhoff's topic in Customize with code
It worked perfectly! You're the best! -
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/
-
Anchor links not working in mobile view
ryanbrinkerhoff replied to RuxandraM's topic in Site Design & Styles
has anyone figured this out yet? -
Thanks! It still needs a ton of work, but it's getting there. I appreciate your expert help! - Ryan
-
Perfect! Thanks a bunch! - Ryan
-
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.
-
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; }
