Jump to content

Search the Community

Showing results for tags 'responsive css'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 2 results

  1. <div class="topnav" id="myTopnav"> <div class="topnav-centered"> <a href="index.html">JACQUELYN MCGARRY</a> </div> <div class="topnav-right"> <a href="shop.html">SHOP</a> <a href="work.html">WORK</a> </div> <a href="about.html">ABOUT</a> <a href="contact.html">CONTACT</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i> </a> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> .topnav { position: fixed; top: 0; width: 100%; padding: 0px; } .topnav a { float: left; display: block; text-align: center; padding: 14px 24px 12px 24px; } .topnav a:hover { padding: 12px 22px 10px 22px; } @media screen and (max-width: 600px) { .topnav a{ float: none; display: block; } .topnav-centered a { position: relative; top: 0; left: 0; transform: none; } .topnav-right a{ float: none; position: relative; } } .topnav .icon { display: none; } @media screen and (max-width: 500px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: left; display: block; } } .topnav-centered a { float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .topnav-right { float: right; } @media screen and (max-width: 500px) { .topnav.responsive {position: fixed;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; /* text-align: left;*/ } } My float right menu items don't nest in the hamburger menu. I tried float:left on mobile for topnav-right with no luck. I have no idea how to fix it. Code has been personalized from w3schools tutorials
  2. Hi everyone. I found a image slider for my web page and entegrated it to page. My problem is my web page is responsive but slider not responsive. I tryed some responsive codes by my own but still have problems about it. The css codes are below. IF someone help me about that i ll be very happy. Thanks and good weekend to everyone. /* Slidorion Stylesheet */.slidorion { position: relative; width: 800px; /* Set to slidorion width. Is equal to .slider + .accordion width */ height: 400px; /* Set to slidorion height. Is equal to .slider and .accordion height */ left: 50%; background: #CBCBCB; padding: 10px; border: 1px solid #BBB; box-shadow: 0 0 34px #bbb; ;}.slider { width: 68%; height: 100%; position: relative; float: left; overflow: hidden; /* Hides the animations */}.slider .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}.accordion { width: 32%; height: 100%; font-family: Verdana; background: #eee; box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3); position: relative; z-index:999; overflow: hidden; float: left;}.accordion .header { padding: 8px 14px; font-size: 12px; font-weight: bold; color: #333; background: #ededed; background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%); background: -webkit-linear-gradient(top, #ededed 59%,#dcdcdc 100%); background: -o-linear-gradient(top, #ededed 59%,#dcdcdc 100%); background: -ms-linear-gradient(top, #ededed 59%,#dcdcdc 100%); background: linear-gradient(top, #ededed 59%,#dcdcdc 100%); border-top: 1px solid #ccc;}.accordion .header:first-child { border-top: none;}.accordion .header:hover { background: #EDEDED; cursor: pointer;}.accordion .header.active { border-bottom: none; background: #676767 !important; color: #FFF;}.accordion .content { height: 258px; /* This height needs to be changed as it depends on the accordion height and number of tabs */ font-weight: normal; font-size: 12px; line-height: 20px; margin: 0; padding: 16px; border: none; background: #d6d6d6; background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 10%); background: -webkit-linear-gradient(top, #d6d6d6 0%,#ffffff 10%); background: -o-linear-gradient(top, #d6d6d6 0%,#ffffff 10%); background: -ms-linear-gradient(top, #d6d6d6 0%,#ffffff 10%); background: linear-gradient(top, #d6d6d6 0%,#ffffff 10%); overflow:auto;}.accordion .content p { margin-bottom: 10px;}.slidorion .slidorion-nav { position: absolute; top: 200px; width: 16px; height: 27px; z-index: 9999; background: url('slider/arrows.png') 0 0 no-repeat; cursor: pointer;}.slidorion .slidorion-nav-left { left: 30px;}.slidorion .slidorion-nav-right { right: 310px; background-position: -16px 0;}
  • Create New...