Ttdfjt

What is a Romeo Word™?

Why is Google approaching my VPS machine?

In this iconic lunar orbit rendezvous photo of John Houbolt, why do arrows #5 and #6 point the "wrong" way?

How slow ( not zero) can a car engine run without hurting engine and saving on fuel

Why does a tetrahedral molecule like methane have a dipole moment of zero?

What could make large expeditions ineffective for exploring territory full of dangers and valuable resources?

Is it possible to have a career in SciComp without contributing to arms research?

Data visualisation: Pie charts with really small values

How to tell if JDK is available from within running JVM?

Difference between class and struct in with regards to padding and inheritance

Why teach C using scanf without talking about command line arguments?

Who or what determines if a curse is valid or not?

How did J. J. Thomson establish the particle nature of the electron?

Should I have one hand on the throttle during engine ignition?

Wildcards not interpreted by shell script when used with output redirection

Why are flying carpets banned while flying brooms are not?

Why is the Intel 8086 CPU called a 16-bit CPU?

Wait or be waiting?

How do I reproduce this layout and typography?

How did Jayne know when to shoot?

The most secure way to handle someone forgetting to verify their account?

Locked-up DOS computer beeped on keypress. What mechanism caused that?

When designing an adventure, how can I ensure a continuous player experience in a setting that's likely to favor TPKs?

Why doesn't Venus have a magnetic field? How does the speed of rotation affect the magnetic field of a planet?

Magento 2 - Full width for a section in product view page

Render product view into without full product view controller requestMagento Event dispach for Product View PageMagento 2 - Full Width SectionMagento 2 : Banner full widthcan't figure out how to make iframe full widthCMS Images Not ResponsiveHow to move the add to cart section under the short description on product view pageChange default Magento 2 theme to use a boxed layout instead of full width?Magento 2 Product Image not full width on page loadMagento2 Luma move category image so its full width

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

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="MagentoCmsBlockBlock" 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;

magento2 magento-2.1 php layout css

share|improve this question

asked Jul 10 at 13:54

RobertRobert

1,0261212 silver badges3636 bronze badges

add a comment | 

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="MagentoCmsBlockBlock" 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;

magento2 magento-2.1 php layout css

share|improve this question

asked Jul 10 at 13:54

RobertRobert

1,0261212 silver badges3636 bronze badges

add a comment | 

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="MagentoCmsBlockBlock" 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;

magento2 magento-2.1 php layout css

share|improve this question

asked Jul 10 at 13:54

RobertRobert

1,0261212 silver badges3636 bronze badges

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

.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;

share|improve this question

asked Jul 10 at 13:54

RobertRobert

1,0261212 silver badges3636 bronze badges

share|improve this question

asked Jul 10 at 13:54

RobertRobert

1,0261212 silver badges3636 bronze badges

asked Jul 10 at 13:54

RobertRobert

1,0261212 silver badges3636 bronze badges

asked Jul 10 at 13:54

RobertRobert

1,0261212 silver badges3636 bronze badges

1 Answer
1

active

oldest

votes

-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;

share|improve this answer

answered Jul 10 at 14:07

TheOkayCoderTheOkayCoder

1422 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f281587%2fmagento-2-full-width-for-a-section-in-product-view-page%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

-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;

share|improve this answer

answered Jul 10 at 14:07

TheOkayCoderTheOkayCoder

1422 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  
  

  
  
  
  

add a comment | 

-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;

share|improve this answer

answered Jul 10 at 14:07

TheOkayCoderTheOkayCoder

1422 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  
  

  
  
  
  

add a comment | 

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;

share|improve this answer

answered Jul 10 at 14:07

TheOkayCoderTheOkayCoder

1422 bronze badges

.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;

share|improve this answer

answered Jul 10 at 14:07

TheOkayCoderTheOkayCoder

1422 bronze badges

answered Jul 10 at 14:07

TheOkayCoderTheOkayCoder

1422 bronze badges

answered Jul 10 at 14:07

TheOkayCoderTheOkayCoder

1422 bronze badges