skip to link text is visible on firefox but not on samsung internet? suggestion on css file also |
skip to link text is visible on firefox but not on samsung internet? suggestion on css file also |
జిందం వాఐి |
Dec 22 2023, 10:32 PM
Post
#1
|
Group: Members Posts: 5 Joined: 6-November 23 Member No.: 29,084 |
* please find any shortcomings on my css code also
* i have skip link text_ "<span lang="te">దయచేసి జిందం వాఐి ఆలోచనల జాగా మార్పులు గురించి అరుసుకొను</span>" * its hidden on samsung internet, visible on firefox on android device. * is this normal? * My Webpage * css code CODE /* Skip link styling */ .text-assistive { -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0); box-sizing: border-box; position: absolute; margin: 0; padding: 0; } .text-assistive.display-at-top-on-focus { top: 0; left: 0; width: 100%; } .text-assistive.display-at-top-on-focus:focus { -webkit-clip-path: none; clip-path: none; z-index: 999; height: 80px; line-height: 80px; background: white; font-size: 1.2rem; text-decoration: none; color: #1295e6; text-align: center; } #skip-link-target:focus { background: #084367; color: white; } /* end of skip link styling */ /* improved keyboard focus visibility */ a:focus { border-bottom-color: #1295e6; } .menu-right a:focus, .branding a:focus { background-color: white; color: #1295e6; } /* end of improved keyboard focus visibility */ /* basic styles for the rest of the page */ body { font-family: sans-serif; font-size: 1.5em; font-weight: bold; font-style: normal; margin: 0; padding: 0; background-color: #F0F0F0; color: #000000; line-height: 1.5em; letter-spacing: 0.12em; word-spacing: 0.16em; margin-bottom: 2em; } .bg-dark { background: #FFDBFF; color: #fff; min-height: 100px; } .content-width { box-sizing: border-box; max-width: 1208px; padding: 1rem; margin: 0 auto; } a { outline-color: transparent; text-decoration: none; color: #1295e6; border-bottom: 4px solid transparent; padding: 2px 1px 0; } a:hover { border-bottom-color: #1295e6; border-bottom: 1px solid; } .menu-right a, .branding a { color: white; } .menu-right a:hover, .branding a:hover { background-color: white; color: #1295e6; } .branding { display: flex; align-items: center; flex-wrap: wrap; width: 220px; font-size: 2rem; font-style: italic; height: 68px; } .branding a { padding: 0 1rem; } .flex-container { display: flex; align-items: center; flex-wrap: wrap; } .menu-right { width: 100%; display: flex; flex-wrap: wrap; height: 68px; } .menu-right a { display: flex; align-items: center; padding: 0 1rem; } /* end of basic styles for the rest of the page */ /* start old css */ cite { font-style: normal; } footer { padding: 3px; background-color: #F6FEF6; color: #0d0c0c; } a:link { color: #3C6D2C; } a:visited { color: #ff0000; } a:active { color: #ec00ff; } a:focus { border-bottom: 1px solid; } /* end of old css */ |
Lo-Fi Version | Time is now: 26th September 2024 - 06:40 PM |