Click here to Skip to main content
15,885,100 members
Search within:


HTML5 website responsive?
Please Sign up or sign in to vote.
2.00/5 (1 vote)
See more:
HTML
jQuery
HTML5
Hi,

i have been working on a responsive html5 template. In my template i have a slider to that silder i added a list for displaying some images. i looks good when i am viewing it in a desktop browser but when i trying to view it in my mobile or in tab the images get overlapped to each other. so any one please kindly help me out with this
my rest of my site looks good after adding to my template but only i have problem with slider list.
Posted
Updated 25-Aug-14 4:58am
v3
Add a Solution
Comments
Sergey Alexandrovich Kryukov 25-Aug-14 12:16pm    
Not clear what's wrong with your code. You need to create a shortest possible code sample manifesting this problem and add to your question using "Improve question".
—SA
Anil Kumar Ch 25-Aug-14 13:13pm    
<div style="height:350px;margin-left:90px;">


<ul class="ch-grid">
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-1"> <!--

HELLO

--></div>
<div class="ch-info-back">

HELLO


<p style="margin-top: -10px;">view more</p>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-2"><!--

Computer

--></div>
<div class="ch-info-back">

Computer


<p style="margin-top: -10px;">view more</p>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-3"> <!--

Computer

--></div>
<div class="ch-info-back">

Computer


<p style="margin-top: -10px;">view more</p>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-4"><!--

Computer

--></div>
<div class="ch-info-back">

Computer


<p style="margin-top: -10px;">view more</p>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-5"><!--

COMPUTER-10

--></div>
<div class="ch-info-back">

COMPUTER - 10


<p style="margin-top: -10px;">view more</p>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-6"><!--

Computer

--></div>
<div class="ch-info-back">

Computer


<p style="margin-top: -10px;">view more</p>

</div>
</div>
</div>
</li>
</ul>




<ul class="ch-grid">

<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-7">
<!--

Computer

--></div>
<div class="ch-info-back">

Computer



<p style="margin-top: -10px;">view more</p>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info"

1 solution

Use CSS media queries to make the HTML5 tags responsive. Media queries helps you to apply different css design for different types of devices with different size of screen. For example check this link.
 
Share this answer
 
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Facing issues in my responsive website
responsive website development
How to create website with responsive web design
I have a made the design of this website . This is not responsive can anybody correct this website to be responsive for all devices.
How do I create responsive map for website
Auto Responsive website...
html5 full flash website
Html, Html5 or PHP WebSite ?
Css responsive margin ?
How to create a website using html5 and css3

Advertise
Privacy
Cookies
Terms of Use
Last Updated 25 Aug 2014
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web01 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900