How to remove expand icon from HTML images in story map

MarkHoover1 · ‎04-21-2016

I am working on a story map journal and after several posts on here as well as some HTML5 and bootstrap courses I have been able to dive in and be somewhat successful in the coding world....

I created a bootstrap grid that goes from 4 columns on a large screen to 1 on mobile that consisted of project types that one could click on and a main stage action would display the desired project. I decided that it would be nice if each project text was paired with an image icon. I went back, found some code and pushed it up on my server. While the images are there, along with the caption, each image has expand arrows on them. See below

I am not sure where these arrows are coming from. The example code I found on-line did not have them and when i put the code in an editor like w3 school the arrows are not there. Below is my code for this page.

</div>

</div>

</div>

</div>

Unfortunately I am unable to make this story map public at this time. Any advice would be greatly appreciated.

Thank You

GregoryL_Azou · ‎04-21-2016

Sorry about that, Map Journal is a bit aggressive and add this button to every image (except in some condition but you can't replicate them as you are using a bootstrap grid). The most simple would be to hide it through a CSS rules: (just add that rule through the source mode)

<style>
.btn-fullscreen {
display: none;
}
</style>

In that case it will hide all the expand button in your Journal, if you only want to hide those particular button but keep them in rest of the Journal, you could use the thumbnail class that you define on those to be more specific:

<style>
.thumbnail .btn-fullscreen {
display: none;
}
</style>

View solution in original post

GregoryL_Azou · ‎04-21-2016

Sorry about that, Map Journal is a bit aggressive and add this button to every image (except in some condition but you can't replicate them as you are using a bootstrap grid). The most simple would be to hide it through a CSS rules: (just add that rule through the source mode)

<style>
.btn-fullscreen {
display: none;
}
</style>

In that case it will hide all the expand button in your Journal, if you only want to hide those particular button but keep them in rest of the Journal, you could use the thumbnail class that you define on those to be more specific:

<style>
.thumbnail .btn-fullscreen {
display: none;
}
</style>

MarkHoover1 · ‎04-21-2016

That did the trick!

Thank You