nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Change BasemapGallery thumbnail size

AustinMulder

I am looking for a way to change the size of the thumbnails within the basemapGallery. I have thumbnails that are 300x200px but the gallery seems to have a default size of around 60x50px which it forces all thumbnails to. i would like to increase the size of these thumbnails but cannot find a single example of how to do this, or any reference anywhere regarding thumbnail size.

Any ideas?

Thanks,

Find more posts tagged with

Accepted answers

kenbuja

In the CSS, you can make changes to the .esriBasemapGalleryThumbnail size.

.esriBasemapGalleryThumbnail {
      height: 100px;
      width: 150px;
    }

However, just modifying this throws off the spacing of the thumbnails, so you'll have to explore the other settings

All comments

kenbuja

But you didn't make any changes in the CSS values in your code.

By the way...why are you still using legacy style coding (dojo.require)?

ChrisSmith7

Austin,

I tried it on my end and it appears to work - are you sure your browser isn't caching something?

AustinMulder

Thanks for the quick answer Ken,

Unfortunately I am not seeing any change. I am using JavaScript 3.15 if that matters..

here is the site I am working on: NeoTreks Maps - Recreation and Trail Maps for the Untied States

kenbuja

Changing .esriBasemapGalleryNode fixes the overlap problem

.esriBasemapGalleryNode {
  width: 150px;
}

kenbuja

In the CSS, you can make changes to the .esriBasemapGalleryThumbnail size.

.esriBasemapGalleryThumbnail {
      height: 100px;
      width: 150px;
    }

However, just modifying this throws off the spacing of the thumbnails, so you'll have to explore the other settings

RickeyFight

Austin,

Can you post the code you are working with or a sample you are basing your wepapp off of ?

AdrianWelsh

I do not think that you can change the size of these thumbnails in Esri's out-of-the-box galleries. You will likely have to custom create your own landing page to make a gallery of maps/apps in order to make the thumbnails different. Though, I could be wrong...

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.