Div na całą szerokość

pytanie zadane 22 marca 2019 w HTML i CSS przez niezalogowany
edycja 7 lutego 2021

W jaki sposób mogę dopasować diva na całą szerokość ekranu?

Na chwilę obecna wygląda to tak:

<div class="enjoy-css7">
            <img src="https://i.ibb.co/g69XSxZ/My-Post-1.png" width="100%" height="100%" />   
</div>

.enjoy-css7 {
	background-color: #0d33ad;
	margin-top: -10px;	
}

Dopasowanie prawym i lewym marginem nie przyniesie efektu, ponieważ na różnej rozdzielczości ekranu będzie to wyglądało inaczej.

komentarz 22 marca 2019 przez kalczur Gaduła (4,320 p.)

Jakbyś dał cały kod byłoby łatwiej. Diva w którym masz wszystko zamknięte musisz dać na width: 100%; i tyle

komentarz 22 marca 2019 przez niezalogowany

Cały kod odpowiedzialny za ten fragment:

<div class="enjoy-css7">
            <img src="https://i.ibb.co/g69XSxZ/My-Post-1.png" width="100%" height="100%" />    
</div>      
<div class="home-list">
    <div id="generic_price_table" class="product-list row" data-equalizer>
    {foreach key=row item=product from=$results}
        {assign var=category value=$product.instance->getCategory()}
        {if $category}
            {assign var=category_url value=$category->getUrl()}
        {/if}
        <div class="product col-xs-4 col-sm-4 col-md-4 col-lg-4 animate">
            <div class="thumbnail clearfix view-img" data-equalizer-watch>
                    <div class="pg_label">
                    {foreach key=group_id item=group_image from=$product.my_groups}
                    {$group_image}
                    {/foreach}
                    </div> 
                {if $show_image==1}<div data-equalizer-watch="image"><div class="image">{$product.photo}</div></div>{/if}
                <div class="caption clearfix">
                    {if $show_name==1}<p class="text-center">{$product.name}</p>{/if}
                    {if $show_weight}<div class="weight text-center text-muted">{if $product.weight}{__ text="Waga"}: {$product.weight}{/if}</div>{/if}
                    

                    {if $show_description==1}<div class="description text-center" style="color: #414141; font-family: Lato; text-align: center;">{$product.description}</div>{/if}
                </div>  
                {if $show_price==1}
                    <div class="main_price" data-equalizer-watch="main_price"><b>150</b><sup> ,00</sup> <sub>rok</sub>

                    {if $show_discount==1 && $product.discount!=0 && $product.check_price!=1}
                        <div class="discount-old_price text-center">
                            <div class="discount">{__ text="Rabat"}: {$product.discount} %</div>
                        </div>
                    {elseif ($show_old_price==1 && $product.check_price!=1 && $product.check_old_price==1)}
                        <div class="discount-old_price text-center">
                            <div class="price old_price">
                            {if ($price_view=='net_gross' || $price_view=='only_net')}
                                {$product.old_price_net}
                            {else}
                                {$product.old_price}
                            {/if}
                           </div>
                       </div>
                    {/if}                    
                    {if $show_price==1 && $product.check_price!=1}
                        {if $price_view=='net_gross'}
                            <div class="price major_price">{__ text="netto"}: {$product.price_net}</div>
                            <div class="price minor_price">({__ text="brutto"}: {$product.price})</div>
                        {elseif $price_view=='only_gross'}
                            <div class="price">{$product.price}</div>
                        {elseif $price_view=='only_net'}
                            <div class="price">{__ text="netto"}: {$product.price_net}</div>
                        {elseif $price_view=='gross_net'}
                            <div class="price major_price">{__ text="brutto"}: {$product.price}</div>
                            <div class="price minor_price">({__ text="netto"}: {$product.price_net})</div>
                        {/if}

                    {/if}
                    </div>
                    
                    {elseif $category}
                        <p class="text-center product-label"><a href="{urlfor internal="stProduct/list?url=$category_url"}">{$category->getName()}</a></p>
                    {/if}
                    <div class="text-muted basic_price text-center">
                     {if $product.basic_price}
                        <i>{$product.basic_price.quantity} ( {$product.basic_price.brutto} {__ text="za"} {$product.basic_price.for_quantity} )</i>
                     {/if}
                     </div>
            </div>
        </div>    
    {/foreach}
    </div>
</div>
</div>

komentarz 22 marca 2019 przez kalczur Gaduła (4,320 p.)

Więc chodzi o stronę oxhost.pl

To jest oczekiwany efekt? https://i.imgur.com/iJZ6rjr.png

komentarz 22 marca 2019 przez niezalogowany
edycja 7 lutego 2021

Dokładnie tak, przy czym zależy mi na odseparowaniu obrazka (falowanej linii powyżej) od ceny. Obrazek ma być na cala szerokość, natomiast cena ma pozostać tak jak jest to widoczne obecnie

komentarz 22 marca 2019 przez kalczur Gaduła (4,320 p.)

Tak? https://i.imgur.com/E6QbGjR.png

komentarz 22 marca 2019 przez niezalogowany

Tak, o taki efekt mi chodzi

komentarz 22 marca 2019 przez kalczur Gaduła (4,320 p.)

#homepage .container{
    width: 100%;
    margin:0;
    padding:0;
}

#homepage-carousel .swiper-slide img, .homepage-carousel .swiper-slide img {
    width: 100%;
}
.row, .panel .form-horizontal .form-group {
    margin-left:-10px;}

.home-list{
    width: 70%;
    margin-left:15%;
}