0

I add a new block in Product View page:

<referenceContainer name="content">
     <container name="containertwo" as="containertwo" label="ontainer"  htmlTag="container" htmlClass="my-container" after="-">
        <block class="Magento\Cms\Block\Block" name="why-choose" after="-">
            <arguments>
                <argument name="block_id" xsi:type="string">why-choose</argument>
            </arguments>
        </block>
    </container>
</referenceContainer>

Is there any way to made this full width, I mean to be on the entire window not in the page-wrapper?

I try this is CSS but is not work:

.my-container {
    width: 100%; 
    max-width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    background: #666;
}

enter image description here

0

I fix the problem like this

.my-container {
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
 padding: 50px 0;
 margin-bottom: 50px;
 margin-top: 50px;
 background-color: #fafafa;
}
-1

Have you tried adding the important keyword?

.my-container {
    width: 100% !important; 
    max-width: 100% !important;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    background: #666;
}
  • yes is the same, thank you – Robert Jul 10 at 14:13
  • It could be because of the container that it is in. The upper layer is probably limiting the width. You can check that and see if that is editable. – TheOkayCoder Jul 10 at 15:11
  • is a default Luma theme and we talk about Product Page, so you can check this too – Robert Jul 10 at 16:12
  • did you try width: 100vw; – TheOkayCoder Jul 10 at 17:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.