I make some block with image and i want put their in one line inside each other and have some space between them .
I expect this to be horizontal and less inner space.
I want to removing space between blocks.
/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right:0;
padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
padding-right:0;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
padding-left:0;
}
/* only for column content visible */
.col-md-1>div {background-color:#ddd;}
<div class="container-fluid">
<div class="row no-gutter" >
<div class="col-md-6" style="background-color:#d9eaf2;color: #6666ccff;font-family: Roboto,Tahoma,Helvetica,sans-serif;font-size: 14px;margin-bottom: 6px;">i expect this to be horizontal and less inner space.placing it above head in wordpress theme just after head
</div>
<div class="col-md-1 align-middle"><img class="aligncenter size-full wp-image-2940" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1 align-middle"><img class="aligncenter size-full wp-image-2947" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2946" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2945" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2944" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2942" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
</div>
</div>
I'm not sure that I understood your problem, but maybe you just need to wrap your divs with the facebook logo in an another div, and add a display:flex;
Check this example and let me know if it answer your question :)
https://codepen.io/mdubus/pen/NeQOKe
Related
I am working on a website, and I would like to align 4 circles in the center of the content area. The example can be found at invisionbilling.com/stackoverflow. I have something right now that does the job, but I know there will be issues with different window sizes, different picture sizes, etc. How do I set the height of the div container to automatically wrap around the 4 circles/images? Is there a way to automatically center it using margin-left and margin-right? I tried "auto" for all of these and it wasn't doing the job. Thanks!
HTML
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
CSS
.circles {
display: block !important;
float: left !important;
margin: 10px !important;
}
.wrapper {
height: 175px;
width: 100%;
margin-left: 225px;
}
Try flexbox instead of floating, and try never to use !important:
<!DOCTYPE html>
<html>
<head>
<style>
.circles {
margin: 10px;
}
.wrapper {
height: 175px;
width: 100%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
</body>
</html>
I have a screenshot as shown below which I am trying to replicate in html/css:
At this moment, I am able to get everything in fiddle with green and orange arrows not properly aligned.
The CSS codes which I have used in order align arrows and desktop in a straight line are:
.tvs
{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
Problem Statement:
I am wondering what changes I should make in the fiddle so that I am able to align green and orange arrows in a straight line in between the desktops.
You can wrap them in one div element and use text-align: center on that div.
.tvs {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.arrows-element {
text-align: center;
}
<div class="tvs">
<div class="arrows">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/End-Arrows-left.png" alt="" width="49" height="62" class="aligncenter size-full wp-image-8105" />
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows-element">
<div class="green-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
</div>
<div class="orange-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
</div>
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows-element">
<div class="green-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
</div>
<div class="orange-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
</div>
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows-element">
<div class="green-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
</div>
<div class="orange-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
</div>
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/End-Arrows-right.png" alt="" width="49" height="62" class="aligncenter size-full wp-image-8105" />
</div>
</div>
I need to edit these icon kind of menu.
I need them centered on the page, and also look good on mobile.
Here is my sample code:
<div style="margin-left: 0 auto;">
<div style="margin:0 auto;"> <img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Blog-Icon.png" alt="tartisma-blog" width="128" height="128" /><br />Tartışma <br />Blog</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Gift-Icon.png" alt="hediyeler-kaynaklar" width="128" height="128" /><br />Hediyeler <br />ve Kaynaklar</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Chapel-Icon.png" alt="kilise-bul" width="128" height="128" /><br />Kilise <br />Adresleri</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Bible-Icon.png" alt="online-kutsal-kitap" width="128" height="128"/><br />Online <br />Kutsal Kitap</div>
</div>
and here is the fiddle: https://jsfiddle.net/yjwo2eqa/
Can someone help me?
Thanks
Giving text-align: center; to the top most div fixes it:
<div style="margin-left: 0 auto; text-align: center;">
Preview
Fiddle: https://jsfiddle.net/h3ckLfx1/
<div style="text-align:center">
<div style="margin:0 auto;"> <img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Blog-Icon.png" alt="tartisma-blog" width="128" height="128" /><br />Tartışma <br />Blog</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Gift-Icon.png" alt="hediyeler-kaynaklar" width="128" height="128" /><br />Hediyeler <br />ve Kaynaklar</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Chapel-Icon.png" alt="kilise-bul" width="128" height="128" /><br />Kilise <br />Adresleri</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Bible-Icon.png" alt="online-kutsal-kitap" width="128" height="128"/><br />Online <br />Kutsal Kitap</div>
</div>
margin-left is not required just add text-align:center
So I have a simple image-thumbnails landing page like:
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
On my site 4 are shown side by side on desktop. How do I force them to appear in twos in one line on mobile view?
So:
Desktop:
# # # #
Mobile:
# #
# #
If you are ok with clear:both then go with this solution.
Updated Demo
It will give you break at that point where you want to..i have used custom media queries and change according to your need. Hope it will help..
You have to add a media query to set the width of divs to 50% at the specified breakpoint.
#media (max-width: 400px) {
div {
width: 50%;
}
}
<div style="display: inline-block;">
<img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
<img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
<img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
<img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
Reference: MDN - CSS media queries
I want to make a navigation bar, with each item having its own image with the name of the item written on top of that. So there should be a few images in a row, and each one has some text written on it. This is the row of images I got:
<div class="navigation" align="center">
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
</div>
<div class="navigation" align="center">
<ul><li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div><li>
</ul>
</div>
<style>
li
{
display:inline-block;
}
</style>
Give each a href a class ie .home_bg etc.
Then in css add a
.home_bg {
background-image: url(/example/example.png)
}
do this for each image if they are different. Then in the html remove img tags