Jump to content

Oladunni Faith

Members
  • Posts

    12
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Oladunni Faith's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Hello anyone, so today I created an html page layout and styled it with CSS, Everything seems to be working well except the background image won't display when I send the HTML file to my Phone. Tried searching answers elsewhere but to no avail..... can someone please help on this? Here's the code I used: .head{ background-color: #817c7c; background: url(testube.png) no-repeat left, url(testing.png) no-repeat right; width: 100vw; height: 30vh; overflow: hidden; position: relative; margin: 0; padding: 0; } .body{ font-family: Arial, Helvetica, sans-serif; background-color: darkgray; background: url(microscope.png) center/cover no-repeat; font-size: medium; width: 100vw; height: 50vw; padding: 5px; margin: 0; overflow: auto; position: relative; } .foot{ width: 100vw; height: 10vh; background-color: #817c7c; background: url(plain.jpg) center/cover repeat; text-align: center; overflow: hidden; margin: 0; padding: 0; }
  2. Ok thanks... I'd look into this..... Haven't studied media queries yet.... Just trying things
  3. I've tried sending a screenshot from my computer but the file seems too large to be uploaded. Yes it stands alone at full screen but it obeys same rule at 900px when @400px
  4. yes each links texts should be standing on its own @400px instead of floating side by side to each other. LIKE THIS: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive
  5. Rule as in? I can't find any problem related with the <li> rules. Each texts on the link should stand on its own @400px. Please take a look at this https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive
  6. Good day Anyone? I was practicing Navigation bars in w3school tutorial earlier today and came across media query. My intention was to just try it the same way it was written on the tutorial platform since I haven't gotten to the topic yet. The first one @900px worked well, the second @400px doesn't seem to work. please can someone help me on this? As I've been trying to find this bug but can't. Also tried making it sticky and it worked. HERE'S THE CODE: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sidenav</title> <style> body{ margin: 0; background-color: black; color: white; } h1{ color: darkred; text-align: center; font-weight: bold; font-style: italic; } h3{ color: darkred; text-align: left; font-weight: bold; font-style: italic; } ul.sidenav{ margin: 0; padding: 0; list-style-type: none; background-color: darkgray; overflow: auto; width: 30%; height: 100%; position: fixed; } ul.sidenav li a{ text-decoration: none; color: black; padding: 15px; display: block; } ul.sidenav li a.active{ background-color: dodgerblue; color: white; } ul.sidenav li a:hover:not(.active){ background-color: dodgerblue; color: white; } .content{ margin-left: 30%; height: 1000px; padding: 15px; } @media screen and (max-width: 900px){ ul.sidenav{ width: 100%; height: auto; position: relative; } ul.sidenav li a{ float: left; padding: 15px; } .content{ margin-left: 0; } } @media screen and (max-width: 400px){ ul.sidenav li a{ text-align: center; float: none; } } </style> </head> <body> <span> <ul class="sidenav"> <li> <a href="#home">HOMEPAGE</a> </li> <li> <a class="active" href="blogs">OUR BLOGS</a> </li> <li> <a href="customerservices">OUR CUSTOMER SERVICES</a> </li> <li> <a href="#tour">TAKE A TOUR</a> </li> <li> <a href="#booknow">BOOK A FLIGHT NOW</a> </li> <li> <a href="#contactus">CONTACT US</a> </li> </ul> </span> <div class="content"> <h1>My Responsive Sidenav Practice</h1> <p>This practice use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p> <p>I have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p> <p>I hope to learn more about media queries and responsive web design later in my CSS Tutorial journey.</p> <h3>Resize the browser window to see the effect.</h3> </div> </body> </html>
  7. Ohh.... Now I get it..... Thanks so much
  8. This also worked too... thanks. But why doesn't it work without the */* symbol? I also tried the left/cover and it gave same result as center/cover.... lol COULD THIS BE GENERALLY A CSS RELATED ISSUE?
  9. could have posted the result but it seems the file was too large, so it couldn't be uploaded
  10. ok thanks for the tips..... but same image shows without the *cover command* it also works by setting percentage as well.
  11. I"m new to the world of coding and recently just started learning Css so i tried practicing css shorthand with the aim of making the background image cover the entire screen but it isn't working..... can someone please help me on this?
×
×
  • Create New...