Member Avatar for vineet_edu

Hello,

I have made an aspx page in dotnet, I am also using user controls. I have used 17 small images as my module icons. I want them to come in one line for every screen resolutions. Its not coming on small screens, plesae suggest.

  • 2 Contributors
  • 2 Replies
  • 94 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

reported 17 module icons that wrap on small screens. was correct that the fix lives in CSS, so here are practical, easy-to-apply approaches that work regardless of ASP.NET master pages or user controls.

Use a non-wrapping flex row that allows horizontal scroll on narrow viewports and scale icons responsively so they fit on most screens:

/* container */
.icon-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* icons */
.icon-row img {
  flex: 0 0 auto;
  width: clamp(28px, 4vw, 56px);
  height: auto;
  object-fit: contain;
}

HTML: place all icons inside a single container like <div class="icon-row">...</div>.

Troubleshooting and tips:

  • Confirm the stylesheet is loaded from the master page (so user controls inherit it) and that no other rule (e.g., img {display:block;width:100%}) is overriding your icon rules. Use browser DevTools to check computed styles and layout.
  • If you must keep everything on one visible line without scrolling, reduce clamp() limits or use a media query to hide/stack less-important icons on narrow screens:
    • @media (max-width:480px) { .icon-row img { width:32px } }
  • For old browsers that lack flexbox support, fall back to inline-block with white-space:nowrap on the container and font-size:0 hacks to remove gaps.
  • Accessibility: keep meaningful alt text for each image.

For details on layout techniques, see MDN on Flexbox and on Media Queries: Basic concepts of Flexbox and Using media queries.

Recommended Answers

All 2 Replies

Member Avatar for vineet_edu

its my master page

Member Avatar for JorgeM

The fact that you are developing in asp.net is not an issue. The asp.net engine returns html back to the browser. You need to apply the proper styles to control the look and feel to the page. Take a look at the results in your browser, right click and view source.

Do you have this page available online?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.