Resizing image card & Dynamic code for text/image
Hey there,
I am trying to find a way to resize the image card. I have it side by side with the text card. It is really easy to get it in this format, but I would like to be able to set the size of the image card, is there a way to do this with the inspect tool possibly (since you can't code)?
I have also tried to code the image & text side by side which works fine, but I realized when I viewed the website from a smart phone the image and text are locked in sxs instead of having the image and text line up vertically. Is there a way to edit my code to allow for movement based on screen size/type of device?
Image 1: Image & Text card SxS (but no option to edit image size)
Image 2: Using html to display image in a float left style and text float right (but the image and text do not re-align vertically for smart phones/tablets)
Here is the code from the second option. I also found that if I add too much text, the text just runs off of this row/card and into other elements forcing me to put a space below.
<style>
.image-container {
float: left;
width: 390px;
height: 310px;
overflow: hidden;
margin-top: 20px;
}
.image {
width: 90%;
height: 100%;
object-fit: cover;
}
.text-container {
float: right;
width: calc(100% - 390px); /* Subtract the image width from the total width */
height: auto;
overflow: visible;
padding: 10px;
box-sizing: border-box;
}
</style>
<div class="image-container">
<img class="image" src="https://canature.maps.arcgis.com/sharing/rest/content/items/306db0125905409aaf13d13e45b2a177/data" alt="30x30 December Newsletter">
</div>
<div class="text-container">
<p style="text-align: left;"><font face="Montserrat, Montserrat_EmbeddedFont, Montserrat_MSFontService, sans-serif"><span style="font-size: 29.3333px; white-space-collapse: preserve;"><b><u><a href="https://canature.maps.arcgis.com/sharing/rest/content/items/129c35f9f0584ac090f5eac01abb5e7e/data" target="_blank">30x30 Newsletter: Enhancing the Conservation of Public Lands</a></u></b></span></font></p><h3 style="text-align: left;"><font face="Montserrat, Montserrat_EmbeddedFont, Montserrat_MSFontService, sans-serif"><span style="font-size: 18.6667px; white-space-collapse: preserve;">Strengthening protections and management capacity for public lands and coastal waters can effectively increase our 30x30 Conservation Areas (Pathway 4). It is in this spirit that we are highlighting a few recent public lands conservation successes in this newsletter.</span></font><br></h3>
<div class="card-btn" style="float: right;">
<a href="https://canature.maps.arcgis.com/sharing/rest/content/items/129c35f9f0584ac090f5eac01abb5e7e/data" aria-label="Read more here" class="btn btn-primary" style="text-align: right; color:#ffffff;" target="_blank">Read more here</a></div>
</div>
I'm going to summarize my earlier response, just so folks have context, in case anyone else runs into this problem and then I'll elaborate on how to get your image and text to line up vertically.
--
In our earlier conversation, we talked about how to simplify your code to find out what CSS element was causing the text to cut off and I recommended removing all the positioning attributes, as doing anything with top, bottom, left, right and absolute or fixed positioning is risky when you're a beginner and don't fully understand what the code is doing. I also recommended opening up Chrome Dev tools via right-click on an element > Inspect and then turning on and off the checkboxes. I also suggested wrapping any CSS you embed via <style> tags in a unique classname that could be set in Row Settings under CSS Class, so as to be less likely to interfere with the CSS classnames Hub uses to make our software. For a more detailed reply with pictures on how to do that, see my response here: https://community.esri.com/t5/arcgis-hub-questions/how-to-get-all-cards-in-a-text-box-to-dynamically...
--
Moving on - the reason that your elements do not automatically line up vertically is because reflow is not automatic with custom HTML and CSS. The Layout Editor uses Bootstrap 3, which you can read a little bit more about it on the post I've linked above, but essentially because you are lining up multiple elements inside a Text Card rather than using individual cards, you will need to duplicate the grid inside the Text Card.
You can wrap your image and text-container elements in <div> elements and apply Bootstrap 3 classes to them to indicate breakpoints, like this:
<div class="col-xs-12 col-sm-4">
<div class="image-container"></div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-container"></div>
</div>
Your other alternative is to write media queries that would remove the width calculations at a specific device sizes: https://web.dev/learn/design/media-queries#adjust_styles_based_on_viewport_size
@media (max-width: 560px) {
.image-container {
width: 100%;
}
.text-container {
width: 100%;
}
}
^ This indicates that for screen sizes no bigger than 560px, overwrite previous CSS rules. Media queries written like this should be placed below the rest of your CSS, so that the "cascade" applies correctly. (I also can't promise the code above will work - I'm writing it off the top of my head so you get an idea of how overwrites work for media queries, but it may require tweaking.)
