I'm trying to lay cards next to each other but they are stacking on top of each other.
The height of the cards div is 1.
I have tried changing padding, margin, tried putting height to 100%.
I dont know if my navbar is interfering in some way.
<div className="cards">
<div className="row" style={{ display: "flex" }}>
<div className="col s6 m4">
<div className="card">
<div className="card-image">
<img
src="https://media-cdn.tripadvisor.com/media/photo-s/11/4a/54/fe/essence-restaurant.jpg"
alt="restaurant one"
width="500px"
height="200px"
/>
<span className="card-title">Card Title</span>
</div>
<div className="card-content">
<p>
I am a very simple card. I am good at containing small bits of
information. I am convenient because I require little markup
to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
<div className="col s6 m4">
<div className="card">
<div className="card-image">
<img
src="https://media-cdn.tripadvisor.com/media/photo-s/11/4a/54/fe/essence-restaurant.jpg"
alt="restaurant one"
width="400px"
height="200px"
/>
<span className="card-title">Card Title</span>
</div>
<div className="card-content">
<p>
I am a very simple card. I am good at containing small bits of
information. I am convenient because I require little markup
to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
</div>
</div>
add position: relative; to your row class styles.
.row {
position: relative;
display: flex;
}
<div className="cards">
<div class="row" style={ display: flex; position: relative;}>
<div className="col s6 m4">
<div className="card">
<div className="card-image">
<img
src="https://media-cdn.tripadvisor.com/media/photo-s/11/4a/54/fe/essence-restaurant.jpg"
alt="restaurant one"
width="500px"
height="200px"
/>
<span className="card-title">Card Title</span>
</div>
<div className="card-content">
<p>
I am a very simple card. I am good at containing small bits of
information. I am convenient because I require little markup
to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
<div className="col s6 m4">
<div className="card">
<div className="card-image">
<img
src="https://media-cdn.tripadvisor.com/media/photo-s/11/4a/54/fe/essence-restaurant.jpg"
alt="restaurant one"
width="400px"
height="200px"
/>
<span className="card-title">Card Title</span>
</div>
<div className="card-content">
<p>
I am a very simple card. I am good at containing small bits of
information. I am convenient because I require little markup
to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
</div>
</div>
Related
Using bootstrap 4 inside Vue.js, I'd like to make left and right arrows to appear at the middle of the page around the image.
Here is the code:
<div class="row">
<div class="col-1">
<span class="align-self-center"><h1>❮</h1></span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="align-self-center"><h1>❯</h1></span>
</div>
</div>
But whatever I tamper with CSS, I can not acheive this. How can I fix this?
Well, thanks to this answer, I realized it can be done with minimal fuss, by adding a simple flex css:
.img-box {
display: flex;
align-items:center;
}
And don't forget to add img-box class:
<div class="row img-box">
<div class="col-1">
<span class="nav-arrow">❮</span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="nav-arrow">❯</span>
</div>
</div>
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>
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>
Would you help me please make appear pictures in one column? It needs to be full width with no space between those images.
Thanks in advance.
What I want it to look like
What I have
Code:
img,
.image {
display: block;
height: 350px;
margin: 0;
width: 50%;
}
<section class="main">
<div class="container">
<div class="full-width">
<div class="vibe_editor clearfix">
<div class="v_module v_column col-md-12 fullwidth v_first">
<style>
<div class="v_module v_text_block about_us">
<p>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0">
<img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0">
</a>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0">
</p>
</div>
</div>
<div class="v_module v_column col-md-12 fullwidth v_first">
</div>
</div>
</div>
</section>
href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0"> <img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0"> </a> <a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0"> </p> </div> </div> <div class="v_module v_column col-md-12 fullwidth v_first"> </div> </div> </div> </section>
The p tag has padding by default remove it?
Also remove unwanted <style> tag
What i have :
<div id="outerDiv" style="margin: 20px;">
<div id="innerDiv" style="float: left;">
<span>10002</span>
<div class="arrow-up" alt='some text' />
</br>
<div class="arrow-down"/>
</div>
<div><h3>Text</h3></div>
</br>
<span>Some plain text
<br />
</span>
</div>
All elements in outerdiv except span with plain text have to be aligned, and floated to the left, but i cant figure out a way how to do it. if i move something everything else start flying all over the page. What will be the correct way of doing it? Attached a image of what i want to achieve:
use this stracture it can help u
<div id="outerDiv" style="margin: 20px;">
<div id="innerDiv" style="float: left;">
<span style="float:left; margin-top:15px;">10002</span>
<div class=" " style="float:left;">
<div class="arrow-up" alt='some text' /></div>
<div class="arrow-down"/></div>
</div>
<h3 style="float:left;">Text</h3>
<div style="float:none; clear:both"></div>
</div>
</br>
<span>Some plain text</span>
</div>