Member Avatar for alanlee9898

Hi,

I have 2 problem here.

1) Footer text will wrap together when the size of browser smaller. How can I fix the position without wrapping the text?

2) How to highlight a footer link ? Example, index page, I need to highlight "Home" in different color.

Link :

Thanks!

  • 3 Contributors
  • 3 Replies
  • 77 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by maninaction

Dani AI

Generated

Quick, practical follow-ups to the thread (and thanks to for starting this):

A reliable way to stop footer links from wrapping is to make the footer a single horizontal layout and control how it behaves on small screens. Flexbox keeps items in a line and lets you decide whether they wrap; white-space: nowrap prevents individual links from breaking. If the viewport gets too small, switch the footer to a stacked layout with a media query so nothing is cut off. See the Flexbox and white-space docs for details and edge cases: Flexbox basics and white-space.

To highlight the current page link, give the active anchor a selector and style it so color is not the only cue (use underline or weight too). Mark the active link server-side in your templates when possible; otherwise add it client-side by comparing each link to location.pathname. Also check that links use comparable paths (relative vs absolute) so your matching works. For visual accessibility, confirm contrast against WCAG guidelines: WCAG quick reference.

Troubleshooting tips: use DevTools to shrink the viewport and inspect computed styles; if things overflow, add overflow-x: auto to the footer container; avoid hard-coded pixel widths that break responsiveness; and test link-highlighting across pages to ensure the selector logic covers query strings or index pages.

Recommended Answers

All 3 Replies

Member Avatar for MagicMedia

1. Give it a fixed width.
2. Give it a different class or id.

Member Avatar for alanlee9898

Thanks MagicMedia :)

Edited by alanlee9898 because: n/a
Member Avatar for maninaction

Thanks for the answer magic media

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.