There are several messages concerning this subject, but I cannot solve this problem. As here:
How to reverse the order of elements in responsive mode
I don't understand why is the order of my elements changing? Why my elements to right are not Deposit then Paidout? As in the image below.
It is possible to solve this problem without flex?
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body {
margin: 0;
padding: 0;
}
.txt10 {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: red;
}
.header{
display: inline-block;
width: 100%;
background-color: aqua;
height: 20px;
padding-top: 13px;
padding-bottom: 13px;
}
.header-items-left{
float: left;
padding-left: 20px;
}
.left{
margin-left: 150px;
}
.header-items-right{
float: right;
padding-right: 10px; /*espacement entre les deux lignes à droite */
}
.right{
margin-right: 50px;
}
<div class="header">
<div class="left">
<div class="header-items-left"><i class="far fa-calendar"></i>138 running days</div>
<div class="header-items-left"><i class="far fa-envelope"></i>admin#superbtc.biz</div>
</div>
<div class="right">
<div class="header-items-right"><i class="fas fa-angle-right"></i> deposit</div>
<div class="header-items-right"><i class="fas fa-angle-right"></i> paidout</div>
</div>
</div>
Use float: right on the container instead and display: inline-block for the two items.
.right {
float: right;
}
.text {
display: inline-block;
padding-left: 20px;
}
<div class='right'>
<div class='text'>first</div>
<div class='text'>second</div>
</div>
Related
Hi I have been trying to create something as showing in the image below but I do not know if my way of doing is correct or not, if not could you please correct me.
Thanks
please see the code I have tried:
<Box className="education-details">
<div className="circle"> </div>
<div className="not-circle">
<p className="education-degree">masters</p>
<p className="education-year"> 2017/2019</p>
<p className="education-location">Dublin business school</p>
</div>
<div className="circle"> </div>
<div className="not-circle">
<p className="education-degree">masters</p>
<p className="education-year"> 2017/2019</p>
<p className="education-location">Dublin business school</p>
</div>
<div className="circle"> </div>
<div className="not-circle">
<p className="education-degree">masters</p>
<p className="education-year"> 2017/2019</p>
<p className="education-location">Dublin business school</p>
</div>
</Box>
the CSS part
.education-details {
box-sizing: border-box;
}
.circle {
width: 17px;
height: 17px;
background-color: rgb(255, 0, 0);
border-radius: 50%;
margin-left: -1.75%;
position: absolute;
}
.not-circle {
/* margin-top: -30px;
margin-left: 1.5vw; */
}
The result
codesand box link
Finally, as your question was quite interesting, I played with codepen.io to create something similar to your original picture. I reduced a bit the HTML content like I mentionned in my comment as I prefer using pseudo-elements when possible for graphical concerns.
The HTML sementic could be improved by the use of <section>, <ul> and <li> elements also. In my proof of concept I just used <div> elements. I also prefered using <h2>, <h3> and <time> tags instead of ordinary <p> tags.
You can play with my codepen here: https://codepen.io/patacra/pen/wvperjL
You can see it here after SCSS was compiled to CSS:
html, body {
margin: 0;
position: relative;
}
html {
background-color: #f6f6f6;
}
html::before {
content: "";
display: block;
position: absolute;
z-index: -1;
border-radius: 50%;
background-color: #ffebeb;
top: 8em;
right: -8em;
width: 15em;
height: 15em;
}
body {
padding: 1em;
font-family: Arial, sans serif;
font-size: 14px;
}
body::before, body::after {
content: "";
display: block;
position: absolute;
z-index: -1;
border-radius: 50%;
background-color: #ffebeb;
}
body::before {
top: -10em;
left: -15em;
width: 25em;
height: 30em;
}
body::after {
top: -12em;
right: -12em;
width: 25em;
height: 25em;
}
.timelines {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.timeline-title {
font-size: 1em;
font-weight: bold;
}
.timeline-item {
margin-bottom: 2em;
}
.timeline-item h3 {
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
margin: 0;
position: relative;
}
.timeline-item h3::before {
content: "";
position: absolute;
left: -2.35em;
background-color: #fe4747;
width: 0.7em;
height: 0.7em;
border-radius: 50%;
transform: translate(-0.5px, 0.2em);
}
.timeline-items {
margin: 2em;
padding: 0.01em 0 3em 2em;
border-left: 1px solid #fe4747;
}
.timeline-item {
margin-top: -0.3em;
}
.timeline-item time {
display: block;
float: left;
background-color: #ffebeb;
padding: 0.2em 0.4em;
}
.timeline-item > * {
margin: 1em 0;
}
.timeline-item .location {
clear: both;
font-size: 0.85em;
font-style: italic;
}
<div class="timelines">
<div class="timeline education">
<h2 class="timeline-title">Education</h2>
<div class="timeline-items">
<div class="timeline-item">
<h3>Master of Science in information systems with computing</h3>
<time datetime="2017/2019">2017 – 2019</time>
<div class="location">Dublin Business School, Dublin, Ireland</div>
</div>
<div class="timeline-item">
<h3>Bachelor of electrical engineering</h3>
<time datetime="2011/2016">2011 – 2016</time>
<div class="location">North Maharashtra University, Jalgaon, India</div>
</div>
<div class="timeline-item">
<h3>Boys town public school</h3>
<time datetime="2009/2010">2009 – 2010</time>
<div class="location">Dublin Business School, Dublin, Ireland</div>
</div>
</div>
</div>
<div class="timeline experience">
<h2 class="timeline-title">Experience</h2>
<div class="timeline-items">
<div class="timeline-item">
<h3>Sofware developer</h3>
<time datetime="2020/2022">2020 – Present</time>
<div class="location">Kare, Newbridge, Ireland</div>
</div>
<div class="timeline-item">
<h3>Junior developer</h3>
<time datetime="2019/2020">2017 – 2019</time>
<div class="location">Unipupil limited, Dublin, Ireland</div>
</div>
<div class="timeline-item">
<h3>Junior developer</h3>
<time datetime="2015/2017">2017 – 2019</time>
<div class="location">Dublin Business School, Dublin, Ireland</div>
</div>
</div>
</div>
</div>
I'm struggling to get a font-awesome icon alongside a heading and paragraph like in the picture below:
How can I achieve this?
You can do something like this:
HTML:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<div id="contenedor">
<div class="left">
<h2>Nice Work</h2>
<p>We possess within us two</p>
<p>winds. So far I have written</p>
<p>only of the conscious mind.</p>
</div>
<div class="right">
<i class="fa fa-search"></i>
</div>
</div>
CSS:
#contenedor {
font-family: 'Roboto', sans-serif;
width: 500px;
height: 500px;
background: #FFF;
float: left;
display: block;
}
.left {
float: left;
margin-right: 20px;
text-align: right;
}
.left h2 {
font-weight: bold;
}
.left p {
line-height: 18px;
color:#BDC3C7;
}
.right {
padding-top: 20px;
}
.right i {
background: #1DCFD1;
padding: 20px;
border-radius: 30px;
color:#FFF;
}
Working Demo
I know this is probably totally against the whole idea of the grid system and the responsiveness but let's just assume I want to do the following anyway:
I have the layout that you can see in the picture below.
The problem is initially the whole image+text part takes col-md-9 and the twitter feed takes col-md-2 span on a 1920x 1080 screen. However when displayed on a screen of smaller resolution like 1280x800, I can keep the SAME LAYOUT by changing the image+text part to take up col-md-5 span. So my question is, is it possible to change the element's col-md class using media queries ? I know CSS cannot touch an elements classes but I thought maybe bootstrap came along with a solution. Otherwise I know I can use JavaScript to get the window size and swap the classes.
Here is some code should you need. I didnt want to post any code that is not relevant but if you guys need the whole thing, I can set up a jsfiddle prob.
Thanks ! 1
HTML:
<div class="newsfeed">
<div class="container">
<div class="row">
<div class="col-md-11 mainfeed">
<div class="row top-buffer">
<div class="col-md-3">
<img src="images/chris.jpg" width="190px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Some text here</h2>
<p id="bodypart">Some more text here </p>
</div>
</div>
<div class="row top-buffer topborder">
<div class="col-md-3">
<img src="images/city.jpg" width="190px" height="280px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Text text text</h2>
<p id="bodypart">Text....</p>
</div>
</div>
<div class="row top-buffer topborder">
<div class="col-md-3">
<img src="images/alex.jpg" width="190px" height="280px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Some news text </h2>
<p id="bodypart">xxxxxxxxxxx
</p>
</div>
</div>
</div>
<div class="col-md-1 pull-right">
<!-- Tweet RRS-->
<div class="tweets pull-right">
<a class="twitter-timeline" href="https://twitter.com/sinanspd" data-widget-id="540693554432323584"
width="380px" data-chrome="transparent noscrollbar">Tweets by #sinanspd</a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],
p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");
</script>
</div>
</div>
</div>
</div>
</div>
Relevant CSS:
/* ----------COMMON STYLING ------ */
body{
background-color: black !important;
}
.container{
width: 100%;
}
.jumbotron{
height: 340px;
background-size: cover;
background-image: url("images/banner.jpg");
background-repeat: no-repeat;
background-position: center;
}
.nav li{
display: inline;
margin-right: 130px;
}
#nomarginleft{
margin-right: 0px;
}
.nav a{
font-family: "Crimson Text";
font-size: 28px;
font-weight: bold;
z-index: 2;
text-decoration: none !important;
}
.pull-left{
margin-left: -350px;
margin-top: -30px;
}
.pull-right{
margin-right: -300px;
margin-top: -30px;
}
.nav{
background-color: black;
width: 100%;
}
.fixed {
position: fixed;
top: 0px;
height: 50px;
z-index: 1;
background-color: black;
}
/*--------------------- HOME PAGE ---------------- */
#display{
width: 960px;
height: 420px;
overflow: hidden;
margin: 30px auto 0px auto;
border-radius: 4px;
background-color: white;
}
#display ul{
position: relative;
margin: 0;
padding: 0;
height: 960px;
width: 420px;
list-style: none;
}
#display ul li{
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 960px;
height: 420px;
}
#head > p{
font-family: "Crimson Text";
font-size: 30px;
font-weight: bold;
}
#head{
margin-top: 30px;
margin-left: 220px;
}
.newsfeed{
width: 86%;
height: 800px;
margin-left: -160px;
}
.mainfeed{
margin-left: 130px;
}
.pullup{
margin-top: 0px;
}
.top-buffer{
margin-top: 20px;
}
.topborder{
border-top: 1px solid white;
}
.tweets{
background-color: rgba(247,12,12,0.3);
border: 1px solid white;
margin-left: 50px;
border-color: white;
}
#media (min-width: 1000px) and (max-width: 1300px){
.jumbotron{
height: 250px;
}
.nav li{
margin-right: 50px;
}
.nav a{
font-size: 25px;
}
.pull-left{
margin-left: -60px;
}
.pull-right{
margin-right: -40px;
}
#display{
width: 700px;
height: 350px;
}
#head > p{
font-size: 25px;
}
#head{
margin-top: 30px;
margin-left: 80px;
display: block;
}
.newsfeed{
width: 86%;
}
.newsfeed h2{
font-size: 20px;
}
.mainfeed{
margin-left: 230px;
}
.newsfeed h2, .newsfeed p{
margin-left: 0px;
}
.top-buffer{
width: 800px;
}
.newsfeed .pull-right{
margin-right: -120px;
}
.tweets{
margin-right: -500px;
}
}
Why don't you change your code like below
<div>
<div class="col-lg-9 col-md-5">
<h2 class="pullup">Text text text</h2>
<p id="bodypart">Text....</p>
</div>
<div class="col-lg-3 col-md-5">
<img src="images/alex.jpg" width="190px" height="280px" />
</div>
</div>
So now, on bigger screens the screen will we divided 9 cols and 3 cols, on smaller screen sizes it will be 5 cols each.
If you want to change the layout for smaller screen i.e. tablets and screen just user col-sm-xx and col-xm-xx respectively.
I have this site. When I load it, there is a time while the Facebook like button is loading, but just right before it is loaded, the phone numbers go down for a while, and then go up to the right position, why??
NOTE: maybe if you have a very fast connection you will not notice this.
This is the code:
header {
border-top: 6px solid #9F9F9F;
margin: 0 auto;
background-color: $amarillo;
width: 960px;
padding: 19px 34px;
#include box-sizing (border-box);
.logo-h1 {
float: left;
.logo {
width: 324px;
height: 57px;
a {
width: 324px;
height: 57px;
display: block;
}
}
h1 {
font-size: 17px;
font-family: Verdana, Verdana, Geneva, sans-serif;
width: 491px;
margin-left: 20px;
color: #BC2758;
margin-top: 6px;
}
}
.garantia {
display: inline-block;
margin: 9px 24px 0 0;
width: 145px;
height: 91px;
}
}
.telicon {
display: inline-block;
margin-right: 4px;
width: 18px;
height: 34px;
margin-top: 4px;
}
.tel-fb {
float: right;
#tel {
float: right;
a {
font-size: 29px;
color: #009846;
font-weight: bold;
}
}
.fb-like {
float: right;
margin-top: 3px;
}
}
<header>
<span class="logo-h1">
<div class="logo my-icons-logo">
</div>
<h1>Instalación de canalón en Madrid, Guadalajara, Cuenca, Toledo, Segovia, Soria y Ávila</h1>
</span>
<span class="garantia my-icons-garantia"></span>
<span class="tel-fb">
<div>
<span class="telicon my-icons-telicon" style="float: left"></span>
<span id="tel" itemscope itemtype="http://schema.org/HomeAndConstructionBusiness">
<div itemprop="telephone" class="telephone">
622 585 749
</div>
<div itemprop="telephone" class="telephone">
636 740 393
</div>
</span>
</div>
<div class="fb-like" data-href="http://www.facebook.com/canalonesbastimar" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false">
</div>
</span>
<div style="clear: both"></div>
<!--<div class="fb-like" data-href="http://www.canalonesbastimar.es" data-send="true" data-width="450" data-show-faces="true" data-action="recommend"></div>-->
<div style="clear: both"></div>
<!-- navbar goes here -->
</header>
You should absolutely position the Facebook like widget. It's currently part of the regular flow of the document, so when it loads, it pushes other elements around (namely your navigation links). If you add position:absolute to the element (as well as top/left or right to correctly position it) you won't get a "jittery" load.
For example, adding this CSS to the widget:
position: absolute;
top: 75px;
right: 0;
and making it's parent position:relative should take care of your problem.
What I'm trying to do is to change the background color on the whole "row" div on mouse over and open the href link clicking on any part of the div. I have tried all the solutions I found on SO (both with jquery and pure css) but I can't get it working
Here is my code:
HTML
<div id="row">
<div class="document-date"><?php the_time('d-m-Y') ?></div>
<div class="document-category"><img src="/images/icon.png" /></div>
<div class="document-title">My link
<p>some description</p>
</div>
And the CSS
#row {
position: relative;
width: 700px;
padding: 5px 0 5px 10px;
display: block;
float: left;
}
#row:hover {
background: #fbf5d8;
}
.document-date{
float: left;
color: #1b6392;
font-size: 12px;
margin-right: 10px;
line-height: 35px;
}
.document-category{
float: left;
margin-right: 10px;
line-height: 35px;
}
.document-title {
width: 350px;
float: left;
color: #020100;
font-size: 12px;
font-weight: normal;
margin-top: 1px;
text-decoration: none;
}
.document-title a{
width: 350px;
float: left;
color: #020100;
font-size: 14px;
font-weight: bold;
margin-top: 1px;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
.document-title a:hover{
color: #fff;
}
Any suggestion?
Assuming when you say li, you mean div#row
CSS:
#row:hover {
cursor: pointer
}
JavaScript (using jQuery):
$('#row').click(function() {
// do something
// example:
$(this).find('a:first').click();
});
<div id="row" onclick="alert(1)">
<div class="document-date" >12-08-2014</div>
<div class="document-category" ><img src="/images/icon.png" /></div>
<div class="document-title" ><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
</div>
This would do the trick.
Or if you want the divs separately
<div id="row">
<div class="document-date" onclick="alert(1)">12-08-2014</div>
<div class="document-category" onclick="alert(1)" ><img src="/images/icon.png" /></div>
<div class="document-title" onclick="alert(1)"><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
</div>