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 KBEditor is loading...