I have created 4 geohubs.
One hub links to all the other hubs by Image url links.
The other hubs contain pages, that eventually will get the user to a story map or a story map gallery.
The pages have html code and markdown.
<li class="col-xs-12 col-sm-6 col-md-3">
<div class="card center-block"><img src="https://dvapps.douglas.co.us/gis/gisicons/huber/HNR_Ob1_CA_Sandstone.jpg" alt="Card Thumbnail"><div class="card-options">
<a class="btn btn-default open-btn" href= "https://dougco.maps.arcgis.com/apps/MapSeries/index.html?appid=687cd3d8d019433db424f76cf467f756" target="">Launch</a>
<h4>Acquisition and Development</h4>
<p style="text-align: center;">Acquire, Delelop & Maintain Open Space, Trails & Parks </p>
When I started building the tabbed series story maps, I noticed that the map/webpage/image on side of the screen would over take the description on the other side, so therefore I configured the screen size to be 600x700.
I did this because my intended audience was to view the applications on ipads and I could not get the mobile responsiveness I was after.
When I tested the applications on my iphone 7s, the hub applications would not display correctly, nor did the storymaps links work and the hub design is far from mobile responsive.
Can you please help as I have now been told that these applications need to be mobile responsive, and as of now, they are not.
Can I recommend you switch your cards to our new suggested format? You can find code examples here: Calcite Bootstrap The code you are currently using was deprecated within the framework because it was neither mobile friendly nor accessible to keyboard users. The good news is that you can update your text cards containing the HTML using new style and all the CSS will automatically be applied. The updated cards are responsive and should help you achieve your goal of a mobile friendly site.