Responsive Design Issues in Hub

AmyRoust

I've got a responsive design issue on a Hub site I've been developing. Site URL: Elections Hub 

I've made a pretty simple HTML customization to the banner at the top of my new Hub site so that there is a gray box between the text and the image. Here's the HTML:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>43,43,43,.7<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #f7b518<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 200px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>h3</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 60px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN> 200px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>strong</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Douglas County, Kansas Election Hub<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>strong</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>h3</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

When the browser window is full size, it looks fine.

However, when you shrink the width of the browser or view it on a mobile device, the text does not stay inside the box.

Help?

Anonymous User

I would re-work your custom HTML to use flexbox CSS

This is a fantastic tutorial on how to use flex

https://flexboxfroggy.com/ 

Basically you want to get out of the business of trying to set exact heights of things since the height is going to change as the device reflows. Flexbox lets you choose between a column or row HTML structure and then centering works from there.

Vertical alignment, for example, is very easy in flex

  <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> flex<SPAN class="punctuation token">;</SPAN>
  <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> auto<SPAN class="punctuation token">;</SPAN>
  <SPAN class="property token">flex-direction</SPAN><SPAN class="punctuation token">:</SPAN> column<SPAN class="punctuation token">;</SPAN>
  <SPAN class="property token">justify-content</SPAN><SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

The offending rule i'm finding in your CSS is this one

<SPAN class="">line-height: 200px;</SPAN>

Check out the esri events youtube for a few tutorials on Flexbox. In the latter 30 minutes of "Getting Started with Hub and Enterprise Sites", a developer builds a header using flex.