html - Mobile Slideshow Not Centering -


i have responsive site slideshow. have set slideshow 100% width of browser window, , working fine. problem is, slideshow shifted bit right, if there padding left of image. result user having scroll right see entire slideshow. have tried playing around attributes of div , slideshow itself, no luck. issue appreciated. here css , html code:

css

html { background-color:#000000; }  body { margin:0auto; padding:0; width:100%; }  #header { margin:0auto; padding-top:0.5%; text-align:center; }  #logo { margin:0auto; max-width:186px; max-height:123px; padding-top:1%; padding-bottom:15%; text-align:center; }  #banner { width:100%; }  #home_content { width:100%; padding-top:0.25%; }  #history_content { width:100%; padding-top:0%; }  #home_slideshow { padding-top:1%; display:flex; justify-content:center; }  #home_slideshow { padding-top:1%; display:flex; justify-content:center; }  hr { border-color:#1bb7f2; width:100%; padding:0%; }  #home_footer { width:100%; margin-top:60%; }  #history_footer { width:100%; margin-top:155%; }   .crossfadehome>figure { animation:imageanimation24slinearinfinite0s; backface-visibility:hidden; color:transparent; opacity:0; position:absolute; text-alin:center; width:100%; z-index:0; margin:0auto; }  .crossfadehome>figure:nth-child(1) { background-image:url('../photos/img_1.jpg'); background-repeat:no-repeat; }  .crossfadehome>figure:nth-child(2) { animation-delay:6s; background-image:url('../photos/img_2.jpg'); background-repeat:no-repeat; }  .crossfadehome>figure:nth-child(3) { animation-delay:12s; background-image:url('../photos/img_3.jpg'); background-repeat:no-repeat; }  .crossfadehome>figure:nth-child(4) { animation-delay:18s; background-image:url('../photos/img_4.jpg'); background-repeat:no-repeat; }  @keyframesimageanimation { 0% { animation-timing-function:ease-in; opacity:0; } 8% { animation-timing-function:ease-out; opacity:1; } 17% { opacity:1 } 25% { opacity:0 } 100% { opacity:0 } }  .crossfadehistory>figure { backface-visibility:hidden; color:transparent; opacity:0; position:absolute; text-alin:center; width:100%; z-index:0; margin:0auto; }  .crossfadehistory>figure:nth-child(1) { background-image:url('../photos/history_1.jpg'); background-repeat:no-repeat; }  .crossfadehistory>figure:nth-child(2) { animation-delay:7s; background-image:url('../photos/history_2.jpg'); background-repeat:no-repeat; }  .crossfadehistory>figure:nth-child(3) { animation-delay:14s; background-image:url('../photos/history_3.jpg'); background-repeat:no-repeat; }  .crossfadehistory>figure:nth-child(4) { animation-delay:21s; background-image:url('../photos/history_4.jpg'); background-repeat:no-repeat; }  @keyframesimageanimation { 0% { animation-timing-function:ease-in; opacity:0; } 8% { animation-timing-function:ease-out; opacity:1; } 17% { opacity:1 } 25% { opacity:0 } 100% { opacity:0 } }

html

<!doctypehtml>  <html>  <head></head>  <body id="body">  <!--headersection-->  <div id="logo"> <a href="index.html"target="_self"><img class="logo"src="graphics/logo.jpg"style="display:block;margin:0auto;width:100%;height:auto;max-width:225px;max-height:196px;vertical-align:top;"alt=""title=""></a> </div>  <div id="header"> <p id="contact_info"> <a href="tel://555-555-5555"style="margin-right:1%;"><imgsrc="graphics/icon_phone.png"style="width:11px;height:15px;vertical-align:middle;"alt="phoneicon"title="call us!!">(518)459-9843</a> </p> <pid="contact_info"> <ahref="example.com"></a> &nbsp </p> <p id="contact_info"> <img src="graphics/icon_clock.png"style="width:17px;height:17px;vertical-align:middle;"alt="clockicon"title="our hours"> </p> </div>  <div id="banner"> <hr/> <p id="page_home_header"> </p> </div>  <div id="page_home_main"> <p id="home_content"> </p> <p id="page_home_link"> <a href="pages/link.html"target="_self">link</a> <br/> <br/> <a href="http://www.site.php"target="_blank">site</a> </p> </div>  <div id="home_slideshow"class="crossfadehome"> <figure> <img src="photos/img_1.jpg"style="width:100%;height:auto;"alt=""/> </figure> <figure> <img src="photos/img_2.jpg"style="width:100%;height:auto;"alt=""/> </figure> <figure> <img src="photos/img_3.jpg"style="width:100%;height:auto;"alt=""/> </figure> <figure> <img src="photos/img_4.jpg"style="width:100%;height:auto;"alt=""/> </figure> </div>  <!--footersection--> <footer id="home_footer"> <hr/> <p id="footer_copyright"><ahref="example.net"target="_blank">&copy;<script>document.write(newdate().getfullyear())</script>mysite</a></p> </footer>  </body>  </html>

make sure check typos in code.

change margin:0auto; margin:0 auto; , text-alin:center; text-align:center;.

if want know more margin, click here.

to check errors in css can visit csslint.


Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more