Make DataList Responsive for Mobile using CSS in ASP.Net

Hi akhter,

Check this example. Now please take its reference and correct your code.

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <div class="row">
        <div class="col-sm-4" style="height: 500px;">
            <asp:Image ID="Image1" runat="server" CssClass=" img-rounded img-responsive" Style="width: 300px;
                height: 300px; margin-top: 20px" />
        </div>
        <div class="col-sm-8" style="height: 500px;">
            <h1>
                Name :
                <asp:Label ID="Label1" runat="server" Text="Product Name"></asp:Label></h1>
            <h2>
                Date :
                <asp:Label ID="Label2" runat="server" Text="Price"></asp:Label>
            </h2>
            <h2>
                Price :
                <asp:Label ID="Label3" runat="server" Text="Phone"></asp:Label>
            </h2>
            <h2>
                Email :
                <asp:Label ID="Label4" runat="server" Text="Posted By:"></asp:Label>
            </h2>
            <h2>
                Contact:
                <asp:Label ID="Label5" runat="server" Text="Posted By:"></asp:Label>
            </h2>
        </div>
    </div>
    <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow">
        <ItemTemplate>
            <div style="float: left;">
                <asp:Image ID="Data" runat="server" CssClass="img-rounded img-responsive" Width="120px"
                    Height="100px" ImageUrl='<%# "data:image/jpg;base64," + Convert.ToBase64String((byte[])Eval("Data")) %>'
                    alt="" data-zoom-image='<%# "data:image/jpg;base64," + Convert.ToBase64String((byte[])Eval("Data"))%>' />
                <br />
                <br />
            </div>
        </ItemTemplate>
    </asp:DataList>
    <script type="text/javascript" src="https://cdn.rawgit.com/elevateweb/elevatezoom/master/jquery.elevateZoom-3.0.8.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=DataList1] img").elevateZoom({
                cursor: 'pointer',
                imageCrossfade: true,
                loadingIcon: 'loading.gif'
            });
            $("[id*=DataList1] img").on('click', function () {
                $('[id*=Image1]').attr('src', $(this).attr('src'));
            });
        });
    </script>
</asp:Content>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        Label1.Text = "Fish";
        Label2.Text = DateTime.Now.ToShortDateString();
        Label3.Text = "160";
        Label3.Text = "test@test.co.in";
        Label5.Text = "akhter";
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string query = "SELECT * FROM tblFiles WHERE ContentType = 'image/jpeg'";
        SqlCommand cmd = new SqlCommand(query);
        DataTable dt = new DataTable();
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                sda.Fill(dt);
            }
        }
        DataList1.DataSource = dt;
        DataList1.DataBind();
    }
}

Screenshot

In responsive mode