Bighealspls Comments - Answer Overflow

Bighealspls

Posts Comments

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

This makes me think even more that it's an svg problem instead of me making bad svgs on inkscape cause im a noob xD/

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

<div class="wavy-bg-rel wave-container-top">
  <div class="wavy-bg top-wave long-wave">
    <img src="Styles/svg-wave.svg" alt="" class="wave-svg">
  </div>
  <div class="wavy-bg top-wave short-wave">
    <img src="Styles/svg-wave-test.svg" alt="" class="wave-svg">
  </div>
  <div class="wavy-bg top-wave">
    <img src="Styles/svg-wave-test-2.svg" alt="" class="wave-svg">
  </div>
</div>
<section class="contact-section"></section>
<div class="wavy-bg-rel wave-container-btm">
  <div class="wavy-bg btm-wave long-wave">
    <img src="Styles/svg-wave.svg" alt="" class="wave-svg rotate-svg">
  </div>
  <div class="wavy-bg btm-wave short-wave">
    <img src="Styles/svg-wave-test.svg" alt="" class="wave-svg rotate-svg">
  </div>
  <div class="wavy-bg btm-wave">
    <img src="Styles/svg-wave-test-2.svg" alt="" class="wave-svg rotate-svg">
  </div>
</div>

<div class="wavy-bg-rel wave-container-top">
  <div class="wavy-bg top-wave long-wave">
    <img src="Styles/svg-wave.svg" alt="" class="wave-svg">
  </div>
  <div class="wavy-bg top-wave short-wave">
    <img src="Styles/svg-wave-test.svg" alt="" class="wave-svg">
  </div>
  <div class="wavy-bg top-wave">
    <img src="Styles/svg-wave-test-2.svg" alt="" class="wave-svg">
  </div>
</div>
<section class="contact-section"></section>
<div class="wavy-bg-rel wave-container-btm">
  <div class="wavy-bg btm-wave long-wave">
    <img src="Styles/svg-wave.svg" alt="" class="wave-svg rotate-svg">
  </div>
  <div class="wavy-bg btm-wave short-wave">
    <img src="Styles/svg-wave-test.svg" alt="" class="wave-svg rotate-svg">
  </div>
  <div class="wavy-bg btm-wave">
    <img src="Styles/svg-wave-test-2.svg" alt="" class="wave-svg rotate-svg">
  </div>
</div>

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

body {
  background-color: black;
}
.wavy-bg-rel {
  position: relative;
  height: 100px;
  background-color: black;
}
.wave-container-top {
  transform: translateY(20%);
}
.wave-container-btm {
  transform: translateY(-20%);
}
.top-wave {
  height: 100%;
}
.btm-wave {
  height: 100%;
}

body {
  background-color: black;
}
.wavy-bg-rel {
  position: relative;
  height: 100px;
  background-color: black;
}
.wave-container-top {
  transform: translateY(20%);
}
.wave-container-btm {
  transform: translateY(-20%);
}
.top-wave {
  height: 100%;
}
.btm-wave {
  height: 100%;
}

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

Really easy solution, but I wish there was a solution that wasn't hacky.

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

Since the div containing the waves comes before the section below it in the DOM, it stacks under without any background-color overlaps.

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

I gave my div containing the svg waves a height of 100px. Gave each wave a height of 100%. Translated that div on the Y axis so that it went under the section below it.

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

https://discourse.webflow.com/t/white-lines-or-spaces-between-sections/159208 https://discourse.webflow.com/t/visible-1px-gap-between-sections-at-different-breakpoints/93372 https://stackoverflow.com/questions/19870561/1px-or-less-subpixel-border-on-inline-svg-in-ff25-and-ie10-not-chrome https://stackoverflow.com/questions/70689442/white-line-between-an-element-and-svg-shape/70696191#70696191 So from what I've read, it seems like hacky ways to solving it is the only known way. I think I found my hack for it.

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

I know I've said it a bunch already, but thanks a lot for the help, I really appreciate it. I'm gonna keep chipping away at this. Finding a problem and solving it by doing a different process erks me caues i never found out the problem with the original process. If all else fails then im gonna go your suggestion. I'll update later.

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

Yea it was a paaaain making it on inkscape hehe. Im completely new to inkscape.

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

I think Kevin Powell linked a website that creates them actually..

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

Do you remember if you grabbed them from somewhere or made them for that challenge?

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

Im curious Chris, how did you make those waves paths so quickly?

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

Looks awesome, if all else fails, I'll definitely go the way of inline. Thank you for this example, I'll learn a lot from it.

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

Totally gonna try that too Chris, thanks. I made it from scratch on Inkscape, so I do worry if it's something wrong with one or all three of the svgs.

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

I'm in the "not really sure how any of this will fix this" territory

35 replies

KPCKevin Powell - Community

•Created by Bighealspls on 9/2/2024 in #front-end

1px separation between two divs

I'm gonna try and change the svgs to pngs and change the css accordingly

35 replies

KPCKevin Powell - Community