i ma using temp index-fullscreen-image.html
i desktop it looks like (SEE ATTACHMENT 111.png)
i mobile or when i set small height it looks like (SEE ATTACHMENT 222.png) it fit on full screen and i cannot see all my content
is it possible when content doesn't fit on height turn off full screen option
example like this temp /index-onepage-3.html section SERVICES when i resize height small background is resizing and fit all SERVICES content
111.png
111
[sb_private_reply]?????????????[/sb_private_reply]
Hello,
Unfortunately, this is currently not supported. We will surely work on a Solution for this in coming updates. Meanwhile, you can simply remove the .force-full-screen Class from the .full-screen Element to adapt the Full Screen Container based on the Content Height on Mobile Devices.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
i didn't understand, there is two .force-full-screen Class from the .full-screen
<section id="slider" class="force-full-screen full-screen">
<div class="force-full-screen full-screen dark" style="background-image: url('images/landing/landing1.jpg');background-position: 50% 0;">
<div class="container clearfix">
<div class="slider-caption slider-caption-center">
<h2 data-animate="fadeInDown">Welcome to Canvas</h2>
<p data-animate="fadeInUp" data-delay="400">Create just what you need for your Perfect Website. Choose from a wide range of Elements & simply put them on our Canvas.</p>
<a data-animate="fadeInUp" data-delay="600" href="#" class="button button-border button-light button-rounded button-large noleftmargin nobottommargin" style="margin-top: 30px;">Start Browsing</a>
<a data-animate="fadeInUp" data-delay="800" href="#" class="button button-3d button-teal button-large nobottommargin" style="margin: 30px 0 0 10px;">Buy Now</a>
</div>
</div>
</div>
</section>when i delete both force-full-screen nothing changes
and how adapt the Full Screen Container based on the Content Height on Mobile Devices?
Hello,
Please remove both the .force-full-screen Classes from the above codes.
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
i have delete both the .force-full-screen Classes but did not work
Hello,
Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
<link rel="stylesheet" href="css/responsive.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Document Title
============================================= -->
<title>Home - Full Screen Image | Canvas</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
<!-- Header
============================================= -->
<header id="header" class="transparent-header dark full-header no-sticky">
<div id="header-wrap">
<div class="container clearfix">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/logo.png" alt="Canvas Logo"></a>
<a href="index.html" class="retina-logo" data-dark-logo="images/logo-dark@2x.png"><img src="images/logo@2x.png" alt="Canvas Logo"></a>
</div><!-- #logo end -->
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu">
<ul>
</ul>
<!-- Top Cart
============================================= -->
<div id="top-cart">
<a href="#" id="top-cart-trigger"><i class="icon-shopping-cart"></i><span>5</span></a>
<div class="top-cart-content">
<div class="top-cart-title">
<h4>Shopping Cart</h4>
</div>
<div class="top-cart-items">
<div class="top-cart-item clearfix">
<div class="top-cart-item-image">
<a href="#"><img src="images/shop/small/1.jpg" alt="Blue Round-Neck Tshirt" /></a>
</div>
<div class="top-cart-item-desc">
<a href="#">Blue Round-Neck Tshirt</a>
<span class="top-cart-item-price">$19.99</span>
<span class="top-cart-item-quantity">x 2</span>
</div>
</div>
<div class="top-cart-item clearfix">
<div class="top-cart-item-image">
<a href="#"><img src="images/shop/small/6.jpg" alt="Light Blue Denim Dress" /></a>
</div>
<div class="top-cart-item-desc">
<a href="#">Light Blue Denim Dress</a>
<span class="top-cart-item-price">$24.99</span>
<span class="top-cart-item-quantity">x 3</span>
</div>
</div>
</div>
<div class="top-cart-action clearfix">
<span class="fleft top-checkout-price">$114.95</span>
<button class="button button-3d button-small nomargin fright">View Cart</button>
</div>
</div>
</div><!-- #top-cart end -->
<!-- Top Search
============================================= -->
<div id="top-search">
<a href="#" id="top-search-trigger"><i class="icon-search3"></i><i class="icon-line-cross"></i></a>
<form action="search.html" method="get">
<input type="text" name="q" class="form-control" value="" placeholder="Type & Hit Enter..">
</form>
</div><!-- #top-search end -->
</nav><!-- #primary-menu end -->
</div>
</div>
</header><!-- #header end -->
<section id="slider" class="full-screen">
<div class="full-screen dark" style="background-image: url('images/landing/landing1.jpg');background-position: 50% 0;">
<div class="container clearfix">
<div class="slider-caption slider-caption-center">
<h2 data-animate="fadeInDown">Welcome to Canvas</h2>
<p data-animate="fadeInUp" data-delay="400">Create just what you need for your Perfect Website. Choose from a wide range of Elements & simply put them on our Canvas.</p>
<a data-animate="fadeInUp" data-delay="600" href="#" class="button button-border button-light button-rounded button-large noleftmargin nobottommargin" style="margin-top: 30px;">Start Browsing</a>
<a data-animate="fadeInUp" data-delay="800" href="#" class="button button-3d button-teal button-large nobottommargin" style="margin: 30px 0 0 10px;">Buy Now</a>
</div>
</div>
</div>
</section>
<!-- Footer
============================================= -->
<footer id="footer" class="dark">
<!-- Copyrights
============================================= -->
<div id="copyrights">
<div class="container clearfix">
<div class="col_half">
Copyrights © 2014 All Rights Reserved by Canvas Inc.
<div class="copyright-links"><a href="#">Terms of Use</a> / <a href="#">Privacy Policy</a></div>
</div>
<div class="col_half col_last tright">
<div class="fright clearfix">
</div>
<div class="clear"></div>
<i class="icon-envelope2"></i> info@canvas.com <span class="middot">·</span> <i class="icon-headphones"></i> +91-11-6541-6369 <span class="middot">·</span> <i class="icon-skype2"></i> CanvasOnSkype
</div>
</div>
</div><!-- #copyrights end -->
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>
<!-- External JavaScripts
============================================= -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<!-- Footer Scripts
============================================= -->
<script type="text/javascript" src="js/functions.js"></script>
</body>
</html>ATTACHMENTS
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard