#CSS collapsing margins not working due to fragments

1 messages · Page 1 of 1 (latest)

tiny glen
#

What is your source code? Astro doesn't add any <fragment> elements by itself. There is a component called <Fragment> with a capital F which is a long way of saying <></> so maybe you tried to use it but didn't spell it right?

mighty bane
# 
<html lang="en" style="bg-black">
    <head>
        <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
    </head>
    <body class="font-sans bg-white">
        <Header title={SITE_TITLE} />
        <main class="">
            <!--
            <h1 class="full-width">🧑‍🚀 {title}</h1>
            <br />

            <Debug content={frontmatter.pageBlocks} />
            -->

            {frontmatter.hasOwnProperty('pageBlocks') && frontmatter.pageBlocks.map((block:any) => (
                <fragment>
                    {block._template === "banner" && <Banner props={block} />}
                    {block._template === "image_text" && <ImageText props={block} />}
                    {block._template === "columns" && <Columns props={block} />}
                    {block._template === "single_column" && <SingleColumn props={block} />}
                    {block._template === "two_columns" && <TwoColumns props={block} />}
                    {block._template === "cards" && <Cards props={block} />}
                    {block._template === "blog_list" && <BlogList props={block} />}
                    {block._template === "gallery" && <Gallery props={block} />}
                    {block._template === "accordions" && <Accordions props={block} />}
                </fragment>
            ))}

            <br />
            <div class="content">
                <slot />
            </div>
        </main>
        <Footer />
    </body>
</html>

Still WIP

A single component looks like this:

# 
import { marked } from 'marked';

type Link = {
  title: string;
  url: string;
};

export const Banner = component$(({props}) => {
  const { content, image } = props;

  return (
    <div className="relative bg-black text-white spaced-section">
      <div className="absolute bg-cover bg-no-repeat bg-[50%] inset-0" style={{backgroundImage: `url('${image}')`}}></div>
      <span className="absolute bg-cover bg-no-repeat bg-[50%] inset-0 pointer-events-none bg-black/[.5]"></span>
      <div
        className="flex items-start justify-center flex-col py-[calc(10%_+_50px)]">
        <div className="content-container">
          <div
            className="max-w-full md:max-w-[80%]"
            dangerouslySetInnerHTML={
              content ? marked.parse(content) : ''
            }>  
          </div>
        </div>
      </div>
    </div>
  );
});
#

Could it be due to adding Qwik into the mix?

tiny glen
#

Yeah, the fragment elements are right there as I said. Replace those with <></> and they will be gone from the output

vast kindle
#

Or capitalize the F

tiny glen
#

Or remove them, I don't think Astro needs them 🤔

vast kindle
#

True if you are doing it because react trauma of needing a single parent lol