Content not responding to device width

Sammy Dickey asked on May 30, 2018 22:24

I'm working on updating a page that contains two columns of editable text. The columns respond as they should, with the right dropping below the left. The problem I'm facing is the text in each column won't respond to the device width. Any suggestions would be greatly appreciated.

Thank you!

responsive content

Recent Answers

Peter Mogilnitski answered on May 31, 2018 14:43 (last edited on May 31, 2018 14:44)

You have to publish the code. Are you using 2 column layout from Kentico or something custom? Kentico 2 column layout looks like:

<div>
  <cms:CMSWebPartZone ZoneID="zoneA" runat="server" />      
</div>
<div style="width: 100%;">
  <div style="width: 50%; float: left;">
    <cms:CMSWebPartZone ZoneID="zoneB" runat="server" />      
  </div>
  <div style="width: 50%; float: right;">
    <cms:CMSWebPartZone ZoneID="zoneC" runat="server" />      
  </div>
</div>
<div style="clear: both">
  <cms:CMSWebPartZone ZoneID="zoneD" runat="server" />
</div>

If you insert in zones B and C your editable text web part - they will stretch to the column width.

0 votesVote for this answer Mark as a Correct answer

Sammy Dickey answered on May 31, 2018 16:50

Thank you for your quick response! We are using a custom layout, creating a two thirds/one third layout. I'm trying to clean up the code from an old developer, and it looks something like this:

<div style="background:#ffffff; width:900px; margin: auto;">
  <div style="display: block; width: 100%; margin:auto;"><img src="/Prevea/media/Prevea-Press/PP-header_sd.jpg" /></div>
  <div class="clearfix"></div>
  <div style="display: block; padding-left: 7%; float: left; width: 50%; height: 23px;"><cms:CMSWebPartZone ZoneID="zoneDate" runat="server" /></div>
  <div class="clearfix"></div> 
  <div style="display: block; width: 100%; height:13px; margin:auto;"><img src="/Prevea/media/Prevea-Press/PP-line_sd.jpg" /></div>
  <div class="clearfix"></div> 
  <div style="padding-left: 7%;">
    <div class="zoneLeft" style="display: block; float: left; width: 65%;"><cms:CMSWebPartZone ZoneID="zoneLeftIntro" runat="server" />
      <div class="toc"><cms:CMSWebPartZone ZoneID="zoneLeftTOC" runat="server" /></div>
      <cms:CMSWebPartZone ZoneID="zoneLeftBody" runat="server" /></div>
  </div>

  <div class="zoneRight drop" style="width: 25%; float:right; padding-right:3%;"><cms:CMSWebPartZone ZoneID="zoneRight" runat="server" /></div>                                     
</div>

0 votesVote for this answer Mark as a Correct answer

Peter Mogilnitski answered on May 31, 2018 17:32

Use Kentico default(70/30) one as a starting point and start slowly adding things one by one and testing them:

<div>
  <cms:CMSWebPartZone ZoneID="zoneA" runat="server" />      
</div>
<div style="width: 100%;">
  <div style="width: 70%; float: left;">
    <cms:CMSWebPartZone ZoneID="zoneB" runat="server" />      
  </div>
  <div style="width: 30%; float: right;">
    <cms:CMSWebPartZone ZoneID="zoneC" runat="server" />      
  </div>
</div>
<div style="clear: both">
  <cms:CMSWebPartZone ZoneID="zoneD" runat="server" />
</div>

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on June 3, 2018 14:43

On this wrapping div <div style="padding-left: 7%;"> for your columns add width: 100%;

0 votesVote for this answer Mark as a Correct answer

Sammy Dickey answered on June 4, 2018 16:10

Brenden and Peter,

I appreciate your help with this! Unfortunately, the text is still not wrapping within the block. As you can sort of see here, everything wraps responsively, but the text within the box doesn't. I should have mentioned this earlier, but we utilize bootstrap throughout the rest of the site, should I be including it into the layout also?

Thanks again!

0 votesVote for this answer Mark as a Correct answer