i have made the website mobile responsive.All are done.
This is the website which i made responsive.
alpha.dubaiexporters.com
what is happening is that when its of desktop size,the footer links are clickable but when i resize it to small screen,footer links shows unclickable.
i used the inspect element to know the issue and i found that its because of <div class="clearfix"> . So i removed it from my coding but the problem still persists.I dont have any idea.Even i tried removing .clearfix before and after from bootstrap.cs but its not working.[
i dont know why clearfix div is displaying even after removing it from code.
code:
<div class="footer-wrapper">
<div class="footer-container vc_row wpb_row vc_row-fluid ">
<%-- <img src="//cohhe.com/demo/sky/sky-directory/wp-content/uploads/2015/01/skydirectory-footer-logo.png" class="footer-logo " alt="Sky Directory" />--%>
<div class="footer-content" style="padding-top:60px;">
<div class="footer-links-container columns_count_2">
<div id="first" class="widget-area footer-links vc_col-sm-6 " role="complementary">
<div id="sky-directory-useful-links-20" class=" sky-usefullinks widget widget_sky-directory-useful-links row-fluid" style="width: 50%;float:left;">
<div class="useful-links-title">
About DubaiExporters
</div>About Us<br />Member Benefits<br />Link Us<br />Media Partners<br />Contact Us<br /><%--<div class="clearfix"></div>--%></div><div id="sky-directory-useful-links-21" class=" sky-usefullinks widget widget_sky-directory-useful-links row-fluid" style="width: 50%;float:left;">
<div class="useful-links-title">
Information
</div>News<br />Upcoming Exhibitions<br />Advertise<br />Add Your Event<br /><br /><%--<div class="clearfix"></div>--%></div> </div>
<div id="second" class="widget-area footer-links vc_col-sm-6 last" role="complementary">
<div id="sky-directory-contact-us-11" class=" sky-contactus widget widget_sky-directory-contact-us row-fluid">
<div class="contact-us-widget-main">
<div class="contact-us-phone">
<span class="phone-icon fa fa-mobile"></span>
<div class="phone-info-container">
<span class="phone-text">Call us:</span>
<span class="phone-number">+971 4 3050755</span>
</div>
<%--<div class="clearfix"></div>--%>
</div>
<div class="contact-us-lower">
<div class="contact-us-social">
<%--<div class="clearfix"></div>--%>
</div>
<div class="contact-us-email">
<a href="mailto:info#skydirectory.com" class="email-address">
<span class="email-text">Or send an email to:</span>info#dubaiexporters.com</a>
</div>
</div>
<%--<div class="clearfix"></div>--%>
</div>
<%-- <div class="clearfix"></div>--%>
</div> </div>
<%--<div class="clearfix"></div>--%>
</div>
</div>
<%--<div class="scroll-to-top-container">
<div class="scroll-to-top"><span>To Top</span></div>
</div>--%>
<div class="footer-inner">
<div class="footer_info">
<div class="copyright">© 2018, Dubai Exporters</div>
<%--<div class="clearfix"></div>--%>
</div>
</div>
<div class="footer-cloud-container">
<%--<img src="http://cohhe.com/demo/sky/sky-directory/wp-content/themes/sky/images/bottom-cloud.png" width="266" height="116" alt="Footer cloud"/>--%>
<%-- <div class="clearfix"></div>--%>
</div>
</div>
</div>
Related
I am trying to learn Bulma and I want to show a simple page with this layout:
<header>
<hero>
<section>
<footer>
I don't understand why they overlap with each other instead of being clearly one below the other.
There is a dummy container that is obviously misplaced and hidden by the header.
The overlapping is also obvious by the search bar that is both over part of the footer and the hero.
https://codepen.io/anon/pen/bLgOWb
<nav class="navbar is-primary is-fixed-top has-text-white">
<div class="container">
<div class="navbar-brand">
<img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div id="navItem" class="navbar-item">Primo</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container dummy">
</div>
</section>
<div class="hero ">
<div class="container has-text-centered is-size-1">
<h1 class="title"> Explore and use libraries and software</h1>
</div>
</div>
<div id="search" class="container">
<div class="columns searchBlock ">
<div class="column is-paddingless">
<form>
<input class="input searchInput" type="text" placeholder="Search">
</form>
</div>
<div class='column is-3 is-paddingless'>
</div>
<div class='column is-2 is-paddingless'>
<a class='button is-primary searchButton'>Search</a>
</div>
</div>
</div>
<footer class="footer">
<div class="container is-text-centered">
<p> Footer </p>
</div>
</footer>
<script src="old.js"></script>
.hero-body is missing
<div class="hero">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title"> Explore and use libraries and software </h1>
</div>
</div>
</div>
Bulma - Hero
I think problem with column . change column margin follow this
.columns {
marign:0;
}
I'm using bootstrap v.3 and I'm trying to get the item in the same line using form-horizontal class, however I'm not able to get this work, see the code below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid one-half">
<div class="form-horizontal">
<div class="form-group">
<img id="footer-logo" src="#" alt="">
<div id="copyright">
<p>All Rights Reserved.</p>
</div><!--/#copyright-->
<div id="credit">
<p>Powered by WordPress.</p>
</div><!--/#credit-->
</div>
</div>
</div>
what am I doing wrong? Thanks.
.form-group{
display: inline-flex;
}
Is this what you are looking for?
<form class="form-inline">
<div class="form-group">
<img id="footer-logo" src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business.jpg" alt="">
</div>
<div class="form-group">
<div id="copyright">
<p>All Rights Reserved.</p>
</div><!--/#copyright-->
</div>
<div class="form-group">
<div id="credit">
<p>Powered by WordPress.</p>
</div><!--/#credit-->
</div>
</form>
Ref:Forms Bootstrap
Use style="display:inline-block;"
<div class="grid one-half">
<div class="form-horizontal">
<div class="form-group" >
<img id="footer-logo" src="#" alt="" style="display:inline-block;">
<div id="copyright" style="display:inline-block;">
<p>All Rights Reserved.</p>
</div><!--/#copyright-->
<div id="credit" style="display:inline-block;">
<p>Powered by WordPress.</p>
</div><!--/#credit-->
</div>
</div>
</div>
I have the following bootstrap code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
On tablets and desktops, this code looks good. However, on smaller devices, xs, the right content flows into the image. I am trying to make the text just wrap on the right and not collide with the image.
I have a fiddle here so you can see what I'm talking about. If you open the fiddle and resize the browser small enough, you'll see the right text overlap onto the image. How can I prevent this?
Try this.
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-9 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is because of the width set.
Try this.
JSFiddle
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="background-color: #ccc">
<img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
CSS
.test-image{
width:100%;
height:auto;
min-width:25px;
}
Easiest way I know is to apply a direct width to element. You could theoretically alter the bootstrap 3 SCSS or LESS (whichever you use) and add in a special column class, but this is the most direct method.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div style="width:75px" class="col-xs-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is becaue of the width of the col-xs-2.You can chage that.Or try an alternative solution like this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div style="width: 75px; background-color: #ccc;display:table-cell;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="display:table-cell;vertical-align:middle;">
Right content
</div>
</div></div></div>
Or with css flexboxes like
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="display:flex">
<div style="width: 75px; background-color: #ccc;flex:1;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="flex:1;vertical-align:middle;">
Right content
</div></div></div></div>
I've image need code css:
And here my html
<div class="row dvMarTop1">
<div class="col-sm-6" >
<div class="row">
<div class="col-sm-7" >
<img src="images/img230.jpg" class="img-responsive" />
</div>
<div class="col-sm-5" style="background-color: #f1f1f1;">
<div>
<div>Tiêu điểm</div>
<div>Mark Zuckerberg thất vọng vì vệ tinh 200 triệu USD bị tên lửa SpaceX thiêu rụi</div>
</div>
</div>
</div>
<div class="row dvMarTop1" style="background-color:#fff">
<div class="col-sm-4">
<img src="http://imgur.com/79u89Sj" class="img-responsive" />
</div>
<div class="col-sm-8">
<span>
Nghệ An: Cá chết dạt do thuyền chở cá chìm
<font><i class="fa fa-clock-o dvMarTop1 dvTimeItem"></i> 20:00 | Chủ nhật, 15/06/2016</font>
</span>
</div>
</div>
</div>
But as you see I cannot set full background for col-sm-5 and set vertical center text
Can you suggest more ? tks so much
Either you didn't refresh your browser page after you edited the code or you didn't place your style.css under the other CSS links in the head part of the code.
I can't seem to find the way to center a container that has a couple of images and a label. Here is the code:
<div class="container">
<div class="row">
<div class="col-sm-1" style="width:88px;padding-left:0px">
<img id="Img1" runat="server" src="images/image1.gif" />
</div>
<div class="col-sm-8" style="height:60px">
<div class="row">
<div class="col-sm-12 BaseColor1" style="text-align:center">
<img id="Img2" runat="server" src="images/image2.gif" />
</div>
</div>
<div class="row" style="background-color:white;color: black;text-align:center">
<div class="col-sm-12" style="vertical-align:central">
<asp:Label Runat="server" Height="26px" ID="lblComp">COMPANY</asp:Label>
</div>
</div>
</div>
</div>
</div>
How do I make the entire container div or the "row" div (below) to center in the browser?
Try adding "margin:0 auto"
<div class="container" style="margin:0 auto">
<div class="row">
<div class="col-sm-1" style="width:88px;padding-left:0px">
<img id="Img1" runat="server" src="images/image1.gif" />
</div>
<div class="col-sm-8" style="height:60px">
<div class="row">
<div class="col-sm-12 BaseColor1" style="text-align:center">
<img id="Img2" runat="server" src="images/image2.gif" />
</div>
</div>
<div class="row" style="background-color:white;color: black;text-align:center">
<div class="col-sm-12" style="vertical-align:central">
<asp:Label Runat="server" Height="26px" ID="lblComp">COMPANY</asp:Label>
</div>
</div>
</div>
</div>
</div>
You can also see this post about using Bootstrap's "offsets"