HTML5 Responsive upon canvas resize
Question
Facing a problem with responsiveness when triggering media query for mobile. The canvas just vanishes.
Issue:
When resizing to mobile, the aqua canvas just vanishes.
One of the solution:
To hard code the div <canvas id="main" width="1024" height="640"></canvas>
JSBIN: http://jsbin.com/poposopahi/edit?html,css,output
@charset "utf-8"; /* Global Styles */ body { margin-left: auto; margin-right: auto; width: 92%; max-width: 960px; padding-left: 2.275%; padding-right: 2.275%; } /* Header */ header { text-align: center; display: block; } header .profileLogo .logoPlaceholder { background-color: white; color:black; width: 300px; text-align: center; } header .logoPlaceholder span { width: 180px; height: 22px; font-family: 'Montserrat', sans-serif; color: black; font-size: 30px; font-weight: 700; line-height: 53px; } header .logoPlaceholder2 span { width: 180px; height: 22px; font-family: 'Montserrat', sans-serif; color: black; font-size: 30px; font-weight: 700; line-height: 53px; } header .profilePhoto { background-color: rgba(237,237,237,1.00); width: 259px; border-radius: 50%; height: 259px; clear: both; } header .profileHeader h1 { font-family: 'Montserrat', sans-serif; color: rgba(146,146,146,1.00); font-size: 30px; font-weight: 700; line-height: 24px; } header .profileHeader h3 { font-family: sans-serif; color: rgba(146,146,146,1.00); font-size: 16px; font-weight: 700; line-height: 24px; } hr { background-color: rgba(208,207,207,1.00); height: 1px; } header .profileHeader p { font-family: sans-serif; color: rgba(146,146,146,1.00); font-size: 14px; font-weight: 400; line-height: 1.8; overflow-y: auto; } header .socialNetworkNavBar { text-align: center; display: block; margin-top: 60px; clear: both; } header .socialNetworkNavBar .socialNetworkNav { border-radius: 50%; cursor: pointer; } header .socialNetworkNavBar .socialNetworkNav img:hover { opacity: 0.5; } /* Media query for Mobile devices*/ @media only screen and (min-width : 285px) and (max-width : 480px) { /* Header */ header { width: 100%; float: none; } .wrapper { display: inline-block; width: 50%; height: 50%; } header .profileLogo .logoPlaceholder { display: inline-block; text-align: left; } header .profilePhoto { display: inline-block; } header .profileHeader { text-align: center; margin-top: 10%; } header .profileHeader p { text-align: justify; } header .socialNetworkNavBar { text-align: center; display: block; margin-top: 60px; clear: both; margin-bottom: 15%; } header .socialNetworkNavBar .socialNetworkNav { width: 60px; height: 60px; display: inline-block; margin-right: 23px; } } /* Media Query for Tablets */ @media only screen and (min-width : 481px) and (max-width : 1024px) { /* Header */ header { width: 100%; float: none; } header .profileLogo .logoPlaceholder { display: inline-block; font-family: 'Montserrat', sans-serif; } header .profilePhoto { float: left; clear: both; margin-right: 3%; margin-top: 5%; } header .profileHeader { text-align: left; margin-top: 7%; } header .socialNetworkNavBar .socialNetworkNav { width: 74px; height: 74px; display: inline-block; margin-right: 23px; } } /* Desktops and laptops */ @media only screen and (min-width:1025px) { /* Header */ header .profileLogo .logoPlaceholder { float: left; margin-bottom: 50px; } header .profilePhoto { float: left; clear: both; margin-right: 3%; } header .profileHeader { text-align: left; padding-top: 10%; } header .socialNetworkNavBar .socialNetworkNav { width: 74px; height: 74px; display: inline-block; margin-right: 23px; } .wrapper { display: table; padding: 0; width: 100%; height: 100%; } .container { display: table-cell; vertical-align: middle; } .canvas-container { position: relative; max-width: 1024px; min-width: 120px; margin: 0 auto; } #main { width: auto; background-color: aqua; } }
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>About Page template By Adobe Dreamweaver CC</title> <link href="AboutPageAssets/styles/aboutPageStyle.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> <script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js" type="text/javascript"></script> <script> </script> </head> <body> <!-- Header content --> <header> <div class="profileLogo"> <!-- Profile logo. Add a img tag in place of <span>. --> <p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Name :</span></p> <p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Attempts :</span></p> <p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Score :</span></p> </div> <section> <div class="wrapper"> <div class="container"> <div class="canvas-container"> <canvas id="main" width="1024" height="640"></canvas> </div> </div> </div> </section> <!-- Links to Social network accounts --> <aside class="socialNetworkNavBar"> <div class="socialNetworkNav"> <!-- Add a Anchor tag with nested img tag here --> <img src="AboutPageAssets/images/social.png" alt="sample"> </div> <div class="socialNetworkNav"> <!-- Add a Anchor tag with nested img tag here --> <img src="AboutPageAssets/images/social.png" alt="sample"> </div> <div class="socialNetworkNav"> <!-- Add a Anchor tag with nested img tag here --> <img src="AboutPageAssets/images/social.png" alt="sample"> </div> </aside> </header> <!-- content --> </body> </html>
1 answers
solution1
1 ACCPTED 2017-06-27 12:22:12
You defined the CSS styles for main id
#main {
width: auto;
background-color: aqua;
}
in the media query
@media only screen and (min-width:1025px) {
...
}
only. Put it under
/* Global Styles */
Working example: https://jsfiddle.net/tnLy9ab6/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
HTML5 responsive canvas mouse position and resize
Html5 Canvas resize
html5 canvas redraw on resize
HTML5 canvas resize to parent
Resize HTML5 canvas element
Resize Rectangle HTML5 Canvas
Resize image in html5 canvas
Resize function for HTML5 Canvas
Responsive HTML5 Canvas Using CSS
HTML5 Canvas Floating Particles responsive fix?
Related Tags