Edit CSS in ArcGIS Open Data 2.0

Question

Hi everyone,

Currently I'm trying to personalize an Open Data Portal using new release available in my organization. I added many sections with bootstrap 3 using Layout Builder and Text Section. I've modified JSON Code with ArcGIS Online Assistant but I haven't see an option to customize CSS... I mean, I just want to fix the size of search box in "Found Data". Where Can I find it?

KlaraSchmitt · Answer

Could you perhaps use a photo editor to create a consistent sized canvas - like 400x300 pixels, transparent background - and then resize the logos within the context of that canvas and save them? Then you could make the logos smaller or larger based on your preferences, but the actual images would be saved with the context of consistent empty space. If you don't have Photoshop, you could also do this with Online Photo Editor | Pixlr Editor, which is a free browser based tool that is similar (it requires Flash though.)

C_EHoward · Answer

Thanks for the information. Yes, I am using the featured gallery cards. I am creating cards for links to state and county level data and I had hoped to have different size logos for different levels of government-- that was my thinking. I understand what you are saying about the responsiveness, I did not think of that.

Thanks for the resource links-- I looked at a lot of it but still not exactly what I want (but that may not be the best decision anyway)

KlaraSchmitt · Answer

Hello C E Howard, Your code above suggests you are using my .featured-gallery example. For those cards, you can change the width by changing the Bootstrap grid classes. So rather than use <div class="col-xs-12 col-sm-6 featured-gallery"> which basically says, "make this card 100% on phones, and 50% on all screens larger," you could change it to this for example <div class="col-xs-12 col-sm-6 col-md-4 featured-gallery"> This will give you a 100% width card on phones, 50% width card on tablets/small laptops, and 33% width card on large screens. The Bootstrap grid is based on a 12 column row, so each column-size (xs, sm, md, lg) needs to add up to 12 and this dictates width by screen-size, but you can set multiple column classes per card. You can find more information here: https://getbootstrap.com/docs/3.3/css/#grid-example-mixed-complete The image will proportionately resize height based on the width of the Bootstrap column classes; therefore you do not set a height. I would strongly recommend you use a different type of card if you wish to set height, because if you set height on .featured-gallery cards, you will break the responsive layout and it will not look good on mobile devices.