image outside of a container section

Question

I have a little problem I can't solve myself. The whole section is inside such container (need to keep it as I align elements vertically with elements from other sections. I don't have any issue to display in the right position the image inside this container using Flexbox or grid but as you can see in the illustration I need the image always stick on the right but stay in the same position on the left. It's kind of absolute but when I ad absolute I have an issue with the section above. any ideas?

exemple of behaviour : https://www.bain.com/insights/how-to-give-feedback-on-agile-ideas/

enter image description here


<!-- Title & Category Section-->
<section class="container px-4 mx-auto mt-32">
<div class="grid grid-cols-12">
    <div class="col-span-8 col-start-4">
        <div class="mb-2 text-sm font-light">{{ range .Params.Categories }}
            <a href="{{ `categories/` | relLangURL }}{{ . | urlize | lower }}" rel="category tag">{{ . | humanize }}</a>
            {{ end }}
        </div>
    </div>
    <div class="col-span-8 col-start-4">
        <div class="mb-4 text-6xl font-bold"><h1>{{ .Title }}</h1></div>
    </div>
    <div class="col-span-7 col-start-4">
        <div class="mb-10 text-2xl">{{ .Params.Subtitle }}</div>
    </div>
</div>
</section>

<!-- Hero Area -->
<div class="container px-4 mx-auto ">
    <section class="flex flex-row">
        <div class="w-3/12 ">
            <div class="text-right">
                <div class="mb-6">{{ partial "posts/published-date.html" . }}</div>
                <div>{{ partial "posts/modified-date.html" . }}</div>
            </div>
            <div class="text-right">
                {{ partial "posts/reading-time.html" . }}
            </div>
        </div>
        <div class="r-9/12">
            {{ partial "posts/post-hero.html" . }}
      </div>
    </section>
</div>

<!-- Article In Brief-->

<!-- Article main content -->
<section class="container px-4 mx-auto">
    <div class="grid grid-cols-12">
        <div class="">
            <!-- Audio Player -->
            <div class="">{{ with (eq .Params.Audiopost "") }}
                <p>nothing to display</p>
                {{ else }}
                {{ partial "audio.html" . }}
                {{ end }}
            </div>
            <div class="mt-3 ml-1">
                <p class="text-xs">Audio</p>
                <p class="font-bold">Listen to the article</p>
            </div>
        </div>
        <div class="col-span-9 col-start-4">
            <article class="prose lg:prose-l">
                {{ .Content }}
            </article>
        </div>
    </div>
</section>

{{ end }}

and image :

<img src="{{ .Params.Image | absURL }}" alt="{{ .Title }}" loading="lazy" class="absolute">
{{ else }}
<p>pas d'image</p>
{{ end }}

in the red area. 12 cols with start of image at col 3. but want this image to always touch the right side of screen (same as full width hero image but only right) — parisian, Jan 15 '21 at 05:59
something like that : https://www.bain.com/insights/how-to-give-feedback-on-agile-ideas/ — parisian, Jan 15 '21 at 06:23
something like that : https://www.bain.com/insights/how-to-give-feedback-on-agile-ideas/ — parisian, Jan 15 '21 at 06:24

score 0 · Answer 1 · answered Jan 15 '21 at 06:16

0

Just Do this

.container {
   position : relative;
   right : 0;
}

This will make that container align Right . hop this works ..

and Elaborating your problem more will help us to fix your doubt

answered Jan 15 '21 at 06:16

user14997518

9
1

it's what I did but when I do that I go the section below (article content in my case) that goes "under" the image, it breaks the flow. – parisian Jan 15 '21 at 06:22

image outside of a container section

1 Answers1