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:

<div style="background: rgba(43,43,43,.7); color: #f7b518; height: 200px;">
<h3 style="text-align: center; font-size: 60px; line-height: 200px;"><strong>Douglas County, Kansas Election Hub</strong></h3>
</div>‍‍‍

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 · Accepted solution]

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

  display: flex;
  margin: auto;
  flex-direction: column;
  justify-content: center;‍‍‍‍‍‍‍‍‍
‍‍‍‍

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

line-height: 200px;

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. 

[AmyRoust]

I removed the height and line-height rules and the header looks great now! That makes sense that hard coding a height is going to mess with the site's ability to resize and keep things looking good.

Really appreciate the tip on Flexbox! I will dive into that today.

**ETA: I just finished watching the Getting Started with Hub + Enterprise Sites. Rob's custom CSS demo was really helpful! I don't need to use Flexbox to resolve the issue I posted about initially, but I am glad to know where to put the custom CSS code as well as things to watch out for when I venture down that path. Thanks again!