Problem i bootstrap

[SeniorLemuren]

Jag gjorde detta för ett par år sedan och har glömt det mesta. Det har inte använts tidigare. När jag nu skall få igång det så visar det sig att bilderna hamnar lite bakom textfälten. så var det inte tidigare. Något har blivit fel. Jag länkar ju till bootstraps rutiner så det kan ju blivit någon uppdatering kanske.

Någon som är bra på detta? Man kan se felet här-

Bifogar en snutt av kod som visar den första bilden med text överlägg.

Kod: Markera allt

<!--************************** Akutsuopen Teak **************************************-->
    <section class="page-section">
        <div class="container">
            <div class="product-item">
                <div class="product-item-title d-flex">
                    <div class="bg-faded p-5 d-flex ms-auto rounded">
                        <h2 class="section-heading mb-0">
                            <span class="section-heading-upper">Akutsupen</span>
                            <span class="section-heading-lower">Endast för missbruk.</span>
                        </h2>
                    </div>                
                </div> 
                <div>              
                <img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" src="assets/img/produkter-01.jpg" alt="..." />
                </div>
                <div class="product-item-description d-flex me-auto">
                    <div class="bg-faded p-5 rounded">
                        <p class="mb-0">Akutsupen är en väggprydnad som passar lika bra i hobbyverkstaden, gillestugan eller finrummet. Det är tillverkat av den finaste Teak som går att få tag i. Teaken kommer från dörrkarmar som blev omhändertagna när man rev gamla
                            badhuset i Kristinehamn. När den är slut så kan inga mer Akutsupen tillverkas av Teak med så hög kvalite längre. Den är ytbehandlad med Danish Oil för att få en naturlig lyster. Flaskan och glaset ingår ej, det är upp till
                            köparen att förse Akutsupen med önskat innehåll. Man öppnar skåpet med 6 st skruvar som lossar bakstycket. Skåpet är försett med ett vågrätt t-spår på baksidan för enkel uppängning på endast en skruv.
                        </p>
                        <p class="prisetikett">
                         Pris : 995 Kr.  
                        </p>
                        <div class="col-md-12 text-center">
                            <button type="button" class="btn btn-success kopbutton center" data-bs-toggle="modal" data-bs-target="#buyAkutsupen-Modal">KÖP</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

.

[sodjan]

Kollade runt på de olika sidorna och jag kan inte se något problem.
Kan du ta en *skärmkopia* som visar felet så att man kan jämföra?

[SeniorLemuren]

Bild på överlappande text. (windows 11)

överllappad text..png

[sodjan]

Just den kod som du visar visas ju också OK på sidan. Jämför med den som inte visas OK:

Kod: Markera allt

                </div> 
                <h2 class="section-heading mt-5 mb-5">         
                <img class="product-item-img mx-auto d-flex rounded img-fluid mb-3" src="assets/img/produkter-01.jpg" alt="..." />
                </h2>
                <div class="product-item-description d-flex ms-auto">

Kod: Markera allt

                </div>
                <img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" src="assets/img/produkter-02.jpg" alt="..." />
                <div class="product-item-description d-flex ms-auto">

I första koden som visas OK har du med <H2>...</H2> runt bildvisningen. Inte i det andra (där bild och text krockar).

[sodjan]

Jämför:

Skärmbild 2023-11-01 121026.png

Skärmbild 2023-11-01 121041.png

Kod: Markera allt

                    <div class="bg-faded p-5 rounded">
                        <p class="mt-1">Akutsupen är en väggprydnad som passar lika bra i hobbyverkstaden,

Kod: Markera allt

                    <div class="bg-faded p-5 rounded">
                        <p class="mb-0">Akutsupen tillverkas i två olika höjder 21 respekive 24 cm.

Class är olika, ifall det har betydelse...

[SeniorLemuren]

Ja. Jag har ju jobbat och testat lite i sidan. Det som fungerar är

Kod: Markera allt

<h2 class="section-heading pt-2 pb-2 mt-5 mb-5">

före bilden. Problemet var att det inte hjälpte med bara marginal botten topp. Jag lade till padding botten och topp på bilden. då kunde man få en space mellan text och bild. Med bara margin fick man dem bara att ligga kant i kant utan space. Man glömmer fort i den här åldern.

Edit: Jag ändrade även <h2... till <div.... Det är ju en bild och ingen text.