Untitled
unknown
plain_text
3 years ago
12 kB
8
Indexable
r1seN #2688 RyanFromWhidbey - 35 — Yesterday at 7:30 PM When you have too much space like this because they’re both the same background, remove a the padding top from the bottom one at mobile. r1seN — Yesterday at 8:00 PM Okay, on mobile it looks good. but desktop has the space and it's not reducing RyanFromWhidbey - 35 — Yesterday at 8:01 PM Where did you put the padding top 0? r1seN — Yesterday at 8:04 PM I'm looking through the css for the index.html and there isn't padding-top Or am I stupid RyanFromWhidbey - 35 — Yesterday at 8:15 PM You add it To override the padding top from the variable You put it under the padding: var(—sectionPadding); on the #SectionID. The padding top 0 will override the padding top in the variable r1seN — Yesterday at 8:19 PM OH omg. Thank you so much This is beautiful RyanFromWhidbey - 35 — Yesterday at 8:25 PM You’re welcome 🙂 r1seN — Yesterday at 8:30 PM When does the next round of stitches get released? If you have a planned date RyanFromWhidbey - 35 — Yesterday at 8:32 PM I’ve been adding them as I build them. Still have about 25 left of corporate/industrial to submit. They’re the ones that’s in the most recent on your dashboard. After that it’s restaurants, then Mechanics, then nonprofit, then contractors/paintiers, then web design agencies. r1seN — Yesterday at 8:32 PM Ahh okay, cool RyanFromWhidbey - 35 — Yesterday at 8:33 PM Then once code stitch is launch I’m hoping to be able to drop a design pack once a week every Friday at noon pacific standard US And I’ll be taking requests from the subreddit. Most voted industries get on the schedule to design and build. r1seN — Yesterday at 8:38 PM What's the link to the subreddit? I like that idea RyanFromWhidbey - 35 — Yesterday at 8:40 PM It’s private for now. Activating it before launch. Probably invite the beta testers with a link and let the testers decide the next batch to have planned out for post launch r1seN — Yesterday at 8:41 PM Ah okay that's fair r1seN — Today at 11:53 AM Hey Ryan, sorry I got another question. For some reason the CSS code is messed up even though I copy/pasted it from the site & the first section is fine, but the reverse pair second section is messed up on both mobile & desktop and I can't figure out why. I'm assuming its something with the image scaling but the bullet points also don't show up Image Image RyanFromWhidbey - 35 — Today at 11:53 AM Which one did you use In the URL when you get code there’s a number at the end. That’s the ID r1seN — Today at 11:55 AM 364 RyanFromWhidbey - 35 — Today at 12:01 PM What code did you change You might be better off using the body building ones And changing the cs-left img from object fit cover to contain 364 really works best with people crops. r1seN — Today at 12:16 PM Ah okay, the b ody building ones work better. What's the diff between cover and contain? RyanFromWhidbey - 35 — Today at 12:17 PM Cover makes the ing behave like a background image and covers the whole parent. Contain means it will get as big as it can but contained to the parents height and width It will stop growing once it reaches the parents top or bottom edge and maintain its proportions. No stretching r1seN — Today at 12:22 PM Ohhhh okay that's good to know. Thank you! 🙂 RyanFromWhidbey - 35 — Today at 1:02 PM How you like working with it so far? r1seN — Today at 2:52 PM It's really good. I'm just making sure all the color schemes and images are good and matching I switched over to a different side by side and the css formatting is still being a little annoying lol This top section of the reverse pair. I tried the body building one and some others but its tedious lol Image RyanFromWhidbey - 35 — Today at 2:57 PM Ah. Margins On the h2. Add margin left 0 What else you havin issue with? r1seN — Today at 3:07 PM Like in the sbs section? #sbs .cs-left, #sbs-r .cs-left RyanFromWhidbey - 35 — Today at 3:07 PM Nope. The cs-title Looks like it’s not aligned all the way left What’s the other issues with these side by sides? r1seN — Today at 3:09 PM It looks like that's the only one It still isn't changing it for some reason RyanFromWhidbey - 35 — Today at 3:11 PM It should be margin: 0 0 16/16rem 0; What did you try? r1seN — Today at 5:26 PM Sorry I had to go to the gym. I'm putting it here: Image RyanFromWhidbey - 35 — Today at 5:28 PM Inspect the cs-title. Does it have any other margins attached to it from somewhere else ? Maybe need to add margin right auto to push it left r1seN — Today at 6:02 PM This is so weird I tried both and it doesn't move at all Lol RyanFromWhidbey - 35 — Today at 6:02 PM Plop the code in a code pen and let me see what’s going on r1seN — Today at 6:04 PM /*-- -------------------------- --> <--- Side By Side --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0em) { Expand message.txt 7 KB https://pastecode.io/s/16kwqxup thats the html code ^ RyanFromWhidbey - 35 — Today at 6:06 PM Send it to ohwdinfo@gmail.com so I can access it in my computer I don’t have discord in the laptop RyanFromWhidbey - 35#4134 /*-- -------------------------- --> <--- Side By Side --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0em) { :root { --primary: #D98900; --primaryLight: #FFC156; --headerColor: #1a1a1a; --bodyTextColor: #4E4B66; /* 13px - 16px */ --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); /* 31px - 49px */ --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); --bodyFontSize: 1rem; /* 60px - 100px top and bottom */ --sectionPadding: clamp(3.75em, 7.82vw, 6.25em) 1rem; } #sbs, #sbs-r { font-family: 'Roboto', 'Arial', sans-serif; padding: 0; position: relative; z-index: 1; } #sbs .cs-container, #sbs-r .cs-container { width: 100%; /* changes to 1280px on tablet */ max-width: 34.375em; padding: var(--sectionPadding); margin: auto; background: linear-gradient(90deg, rgba(241, 241, 244, 0) 0%, #f1f1f4 100%); /* prevents padding from adding to height and width */ box-sizing: border-box; position: relative; } #sbs .cs-container:before, #sbs-r .cs-container:before { /* Bottom Line */ content: ''; width: 100%; height: 1px; background: #b4b2c7; background: linear-gradient(83deg, #b4b2c7 0%, rgba(250, 251, 252, 0.005) 0%, #b4b2c7 100%); opacity: 1; position: absolute; display: block; bottom: 0; left: 0; } #sbs .cs-container:after, #sbs-r .cs-container:after { /* Right Line */ content: ''; width: 1px; height: 100%; background: #b4b2c7; background: linear-gradient(180deg, #b4b2c7 0%, rgba(250, 251, 252, 0.005) 0%, #b4b2c7 100%); opacity: 1; position: absolute; display: block; bottom: 0; right: 0; } #sbs .cs-lines, #sbs-r .cs-lines { display: none; } #sbs .cs-left, #sbs-r .cs-left { width: 100%; max-width: 32.625rem; margin: 0 auto 3rem; border: 1px solid var(--primary); position: relative; display: block; margin-left: 0; /* width divided by height */ aspect-ratio: 1; /* prevents border from adding to height and width */ box-sizing: border-box; } #sbs .cs-left img, #sbs-r .cs-left img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; } #sbs .cs-right, #sbs-r .cs-right { margin: auto; max-width: 33.875rem; } #sbs .cs-topper, #sbs-r .cs-topper { font-size: var(--topperFontSize); line-height: 1.2em; text-transform: uppercase; text-align: left; letter-spacing: .1em; font-weight: 700; color: var(--primary); margin-bottom: 1rem; display: block; } #sbs .cs-title, #sbs-r .cs-title { font-size: var(--headerFontSize); font-weight: 900; line-height: 1.2em; text-align: left; max-width: 27.125rem; margin: 0 auto 1rem 0; margin-left: 0; color: var(--headerColor); position: relative; } #sbs .cs-text, #sbs-r .cs-text { font-size: var(--bodyFontSize); line-height: 1.5em; text-align: left; width: 100%; max-width: 46.875rem; margin: 0 auto 0 0; margin-bottom: 1rem; color: var(--bodyTextColor); } #sbs .cs-text:last-of-type, #sbs-r .cs-text:last-of-type { margin-bottom: 2.5rem; } #sbs .cs-button-solid, #sbs-r .cs-button-solid { font-size: 1rem; /* 46px - 56px */ line-height: clamp(2.875em, 5.5vw, 3.5em); text-decoration: none; font-weight: 700; text-align: center; margin: auto; color: #fff; min-width: 9.375rem; padding: 0 1.5rem; background-color: var(--primary); border-radius: 0.25rem; display: inline-block; position: relative; z-index: 1; /* prevents padding from adding to the width */ box-sizing: border-box; } #sbs .cs-button-solid:before, #sbs-r .cs-button-solid:before { content: ''; position: absolute; height: 100%; width: 0%; background: #000; opacity: 1; top: 0; left: 0; z-index: -1; border-radius: 0.25rem; transition: width .3s; } #sbs .cs-button-solid:hover:before, #sbs-r .cs-button-solid:hover:before { width: 100%; } } /* Tablet - 768px */ @media only screen and (min-width: 48em) { #sbs .cs-container, #sbs-r .cs-container { max-width: 80rem; display: flex; justify-content: center; align-items: center; } #sbs .cs-left, #sbs-r .cs-left { width: 48%; /* 415px - 522px */ height: clamp(25.9375rem, 37.5vw, 32.625rem); margin: 0; /* 44px - 108px */ margin-right: clamp(2.75rem, 5.5vw, 6.75rem); flex: none; } #sbs .cs-right, #sbs-r .cs-right { max-width: 33rem; margin: 0; width: 45%; flex: none; } } /* Dark Mode */ @media only screen and (min-width: 0em) { body.dark-mode #sbs .cs-container, body.dark-mode #sbs-r .cs-container { background: linear-gradient(90deg, rgba(241, 241, 244, 0) 0%, var(--medium) 100%); } body.dark-mode #sbs .cs-topper, body.dark-mode #sbs-r .cs-topper { color: var(--primaryLight); } body.dark-mode #sbs .cs-title, body.dark-mode #sbs-r .cs-title, body.dark-mode #sbs .cs-text, body.dark-mode #sbs-r .cs-text { color: var(--bodyTextColorWhite); } } /*-- -------------------------- --> <--- Side By Side Reverse --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0em) { #sbs-r .cs-container { background: linear-gradient(90deg, #f1f1f4 0%, rgba(241, 241, 244, 0) 100%); } #sbs-r .cs-container:before { background: #b4b2c7; background: linear-gradient(270deg, #b4b2c7 0%, rgba(250, 251, 252, 0.005) 0%, #b4b2c7 100%); } #sbs-r .cs-container:after { left: 0; } } /* Tablet - 768px */ @media only screen and (min-width: 48em) { #sbs-r .cs-left { margin-right: 0; margin-left: clamp(2.75rem, 5.5vw, 6.75rem); order: 2; } } /* Dark Mode */ @media only screen and (min-width: 0em) { body.dark-mode #sbs-r .cs-container { background: linear-gradient(90deg, var(--medium) 0%, rgba(241, 241, 244, 0) 100%); } } message.txt 7 KB
Editor is loading...