How do I get the About Me and Education sections to the right side of the web
Here is pencode link: https://codepen.io/Weng-Hong-the-selector/pen/GRGjVLy
Here is my HTML and CSS
`
<!DOCTYPE html>
<body>
<div class="resume">
<div class="resume_left">
<div class="resume_profile">
<img src="me.png" width=500px height=250px alt="profile_pic">
</div>
<div class="resume_content">
<div class="resume_item resume_info">
<div class="title">
<p class="bold">TAN WENG HONG</p>
<p class="regular">STUDENT OF DIPLOMA IN IT</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fas fa-mars-and-venus"></i>
</div>
<div class="data">
Male
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-flag"></i>
</div>
<div class="data">
Malaysian
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-signs-post"></i>
</div>
<div class="data">
13A, Elitis Suria, Valencia, 47000, Sungai Buloh, Selangor
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="data">
012-352-5089
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<div class="data">
wenghong.tan#sd.taylors.edu.my
</div>
</li>
</ul>
</div>
<div class="resume_item resume_social">
<div class="title">
<p class="bold">Social</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fab fa-facebook-square"></i>
</div>
<div class="data">
<p>Facebook</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-instagram-square"></i>
</div>
<div class="data">
<p>Instagram</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-youtube"></i>
</div>
<div class="data">
<p>Youtube</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-linkedin"></i>
</div>
<div class="data">
<p>LinkedIn</p>
</div>
</li>
</ul>
</div>
<div class="resume_right">
<div class="resume_item resume_about">
<div class="title">
<p class="bold">About me</p>
</div>
<p>My name is Tan Weng Hong and I am currently 19 years old</p>
</div>
</div>
</div>
<div class="resume_item resume_education">
<div class="title">
<p class="bold">Education</p>
</div>
<ul>
<li>
<div class="date">2021 - present</div>
<div class="info">
<p class="semi-bold">Taylor's College</p>
<p>Diploma in Information Technology</p>
<p>Current CGPA: 3.01</p>
<p>Will Graduate August 2023</p>
</div>
</li>
<li>
<div class="date">2016 - 2020</div>
<div class="info">
<p class="semi-bold">SMK Sri KDU</p>
<p>- Sijil Pelajaran Malaysia (SPM)</p>
<p>   Results: 1A+ 1A 1C+ 1C 2D 3E 1G</p>
</div>
</li>
</ul>
</div>
<div class="resume_item resume_hobby">
</body>
</html>
`
`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: 'Roboto Condensed', sans-serif;
}
body {
background: #D3D3D3;
font-size: 14px;
line-height: 22px;
color: #555555;
width: 200vh;
text-align: center;
}
img{
border: solid;
border_width: 5px;
}
.bold {
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
}
.semi-bold {
font-weight: 500;
font-size: 16px;
}
.regular{
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
}
.resume {
width: 1200px;
height: auto;
display: flex;
margin: 50px auto;
}
.resume .resume_left {
width: 290px;
height: 1050px;
background: #0bb5f4;
padding: 3px;
}
.resume .resume_left .resume_profile {
width: 100%;
height: 350px;
}
.resume .resume_left .resume_profile img {
width: 100%;
height: 100%;
}
.resume .resume_left .resume_content {
padding: 0 25px;
}
.resume .title {
margin-bottom: 20px;
}
.resume .resume_left .bold {
color: #fff;
}
.resume .resume_left .regular {
color: #b1eaff;
}
.resume .resume_item {
padding: 25px 0;
border-bottom: 2px solid #b1eaff;
}
.resume .resume_left ul li {
display: flex;
margin-bottom: 20px;
align-items: center;
}
.resume .resume_left ul li:last-child {
margin-bottom: 0;
}
.resume .resume_left ul li .icon {
width: 35px;
height: 35px;
background: #fff;
color: #0bb5f4;
border-radius: 50%;
margin-right: 15px;
font-size: 16px;
position: relative;
}
.resume .icon i,
.resume ul li i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.resume .resume_left ul li .data {
color: #b1eaff;
}
.resume .resume_left .resume_social .semi-bold {
color: #fff;
margin-bottom: 3px;
}
`
i want my about me section and education section to be on the right side of info section, any idea how to get that to work? thank you in advance
Not sure if you already figured this out, but a quick look at your code I saw that you had a html organization problem so the resume_right was inside the resume_left
this is your fixed code, hope it helps.
If after this you have any positioning problems, I suggest you read the CSS flex documentation.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
<div class="resume">
<div class="resume_left">
<div class="resume_profile">
<img src="me.png" width=500px height=250px alt="profile_pic">
</div>
<div class="resume_content">
<div class="resume_item resume_info">
<div class="title">
<p class="bold">TAN WENG HONG</p>
<p class="regular">STUDENT OF DIPLOMA IN IT</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fas fa-mars-and-venus"></i>
</div>
<div class="data">
Male
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-flag"></i>
</div>
<div class="data">
Malaysian
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-signs-post"></i>
</div>
<div class="data">
13A, Elitis Suria, Valencia, 47000, Sungai Buloh, Selangor
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="data">
012-352-5089
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<div class="data">
wenghong.tan#sd.taylors.edu.my
</div>
</li>
</ul>
</div>
<div class="resume_item resume_social">
<div class="title">
<p class="bold">Social</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fab fa-facebook-square"></i>
</div>
<div class="data">
<p>Facebook</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-instagram-square"></i>
</div>
<div class="data">
<p>Instagram</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-youtube"></i>
</div>
<div class="data">
<p>Youtube</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-linkedin"></i>
</div>
<div class="data">
<p>LinkedIn</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="resume_right">
<div class="resume_item resume_about">
<div class="title">
<p class="bold">About me</p>
</div>
<p>My name is Tan Weng Hong and I am currently 19 years old</p>
</div>
<div class="resume_item resume_education">
<div class="title">
<p class="bold">Education</p>
</div>
<ul>
<li>
<div class="date">2021 - present</div>
<div class="info">
<p class="semi-bold">Taylor's College</p>
<p>Diploma in Information Technology</p>
<p>Current CGPA: 3.01</p>
<p>Will Graduate August 2023</p>
</div>
</li>
<li>
<div class="date">2016 - 2020</div>
<div class="info">
<p class="semi-bold">SMK Sri KDU</p>
<p>- Sijil Pelajaran Malaysia (SPM)</p>
<p>   Results: 1A+ 1A 1C+ 1C 2D 3E 1G</p>
</div>
</li>
</ul>
</div>
</div>
</div>
You should use position to choose the place of your elements in the flow,
in your example, if you want to have your "About me" and "education" always displayed on the right of your screen you have to use
position : fixed;
right : 0;
If you want them to be scrolled like everything else, you can considere using
position : absolute;
right : 0;
In both case you'll have to be carefull of element stacking.
Here are informations about position :
https://developer.mozilla.org/fr/docs/Web/CSS/position
You can use either text-align: right, or display: flex together with justify-content: flex-end. In general, text-align works mostly on text elements, and justify-content will justify all elements and content.
I think using flex box it will help you:
display: flex;
justify-content: flex-end
or you can use positioning for this for example:
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
Related
I'm making a design of information cards for a website but when viewing it on a mobile device, some cards look bigger than others. How could I solve it?
At the beginning of the code, there is the CSS, then the html code
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row h1 {
width: 100%;
text-align: center;
font-size: 3.75em;
margin: 0.6em 0;
font-weight: 600;
color: #c49d12;
}
.column {
padding: 1em;
}
.card {
padding: 3.1em 1.25em;
text-align: center;
background: linear-gradient(0deg, #c49d12 10px, transparent 10px);
background-repeat: no-repeat;
background-position: 0 0.62em;
box-shadow: 0 0 2.5em rgba(139, 118, 32, 0.15);
border-radius: 0.5em;
transition: 0.5s;
cursor: pointer;
}
.card .icon {
font-size: 2.5em;
height: 2em;
width: 2em;
margin: auto;
background-color: #c49d12;
display: grid;
place-items: center;
border-radius: 50%;
color: #ffffff;
}
.icon:before {
position: absolute;
content: "";
height: 1.5em;
width: 1.5em;
border: 0.12em solid #5d4b0b;
border-radius: 50%;
transition: 0.5s;
}
.card h3 {
font-size: 1.3em;
margin: 1em 0 1.4em 0;
font-weight: 600;
letter-spacing: 0.3px;
color: #cda928;
}
.card p {
line-height: 2em;
color: #625a71;
}
.card:hover {
background-position: 0;
}
.card:hover .icon:before {
height: 2.25em;
width: 2.25em;
}
#media screen and (min-width: 768px) {
section {
padding: 1em 7em;
}
}
#media screen and (min-width: 992px) {
section {
padding: 1em;
}
.card {
padding: 5em 2em;
}
.column {
flex: 0 0 50%;
max-width: 50%;
padding: 0 1em;
}
}
</style>
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap" rel="stylesheet">
<section>
<div class="row">
<h1>Características</h1>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-friends"></i>
</div>
<h3>Capacidad</h3>
<p>
De 500 hasta 1,000 personas.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-couch"></i>
</div>
<h3>Mobiliario</h3>
<p>
Mobiliario incluido.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-glass-cheers"></i>
</div>
<h3>Bebidas</h3>
<p>
Refrescos y café
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-money-bill-wave-alt"></i>
</div>
<h3>Apartado</h3>
<p>
Apartado con $15,000.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-utensils"></i>
</div>
<h3>Mantelería</h3>
<p>
Mantelería, cubertería y vajilla.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-wine-bottle"></i>
</div>
<h3>Alcohol</h3>
<p>
Descorche libre.
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-money-bill"></i>
</div>
<h3>Liquidación</h3>
<p>
Liquidar 20 días antes del evento
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-lightbulb"></i>
</div>
<h3>Iluminación</h3>
<p>
Videos musicales,iluminación y robótica.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-check"></i>
</div>
<h3>Personal</h3>
<p>
Mesero, personal y maestro de ceremonias.
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-comments-dollar"></i>
</div>
<h3>Mensualidades.</h3>
<p>
Manejamos los mejores precios a mensualidades.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fab fa-black-tie"></i>
</div>
<h3>Entretenimiento</h3>
<p>
DJ y batucada.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-fan"></i>
</div>
<h3>Florería</h3>
<p>
Centro de flores
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-clock"></i>
</div>
<h3>Servicio.</h3>
<p>
Servicio hasta por 5hrs.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-cloud-meatball"></i>
</div>
<h3>Menú</h3>
<p>
Menú a 3 tiempos
</p>
</div>
</div>
</div>
</section>
I tried to edit certain values of the media query but I don't see any significant change.
Card 'Entretenimiento' has the widest title (h3) making its card the widest in the bunch. Actually its .columns container is stretched wider than the other ones. As does card 'Mensualidades.'.
I added the following code to your CSS:
.column {
flex: 1; /* allow to fill parent width */
min-width: min(15.25rem, 100%); /* at least 15.25rem, 100% when less space available*/
}
.card { height: 100% } /* Stretch to fill parent height */
Changed h3 temporary to width: max-content to find widest h3 with DevTools.
Minimum card width = 15.25rem = (~172px of widest h3) plus (2 x 1.25em card padding) plus (2 x 1rem column padding) = (172px + 40px + 32px) / 16 = 15.25rem.
You don't change the h3 { font-size: 1.3em } anywhere for either mobile/desktop, which means that the above 15.25rem is the minimum required space for a card to keep all cards equally sized on all devices.
Depending on the number of cards in a single row you want on a device, you will have to fiddle with the h3 font size per device type and modify the above 15.25rem to your requirements.
snippet
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row h1 {
width: 100%; width: 100%;
text-align: center;
font-size: 3.75em;
margin: 0.6em 0;
font-weight: 600;
color: #c49d12;
}
/* ADDED */
.column {
flex: 1; /* allow to fill parent width */
min-width: min(15.25rem, 100%); /* at least 17rem, 100% when less space available*/
}
.card { height: 100% } /* Stretch to fill parent height */
/**/
.column {
padding: 1em;
}
.card {
padding: 3.1em 1.25em;
text-align: center;
background: linear-gradient(0deg, #c49d12 10px, transparent 10px);
background-repeat: no-repeat;
background-position: 0 0.62em;
box-shadow: 0 0 2.5em rgba(139, 118, 32, 0.15);
border-radius: 0.5em;
transition: 0.5s;
cursor: pointer;
}
.card .icon {
font-size: 2.5em;
height: 2em;
width: 2em;
margin: auto;
background-color: #c49d12;
display: grid;
place-items: center;
border-radius: 50%;
color: #ffffff;
}
.icon:before {
position: absolute;
content: "";
height: 1.5em;
width: 1.5em;
border: 0.12em solid #5d4b0b;
border-radius: 50%;
transition: 0.5s;
}
.card h3 {
font-size: 1.3em;
margin: 1em 0 1.4em 0;
font-weight: 600;
letter-spacing: 0.3px;
color: #cda928;
}
.card p {
line-height: 2em;
color: #625a71;
}
.card:hover {
background-position: 0;
}
.card:hover .icon:before {
height: 2.25em;
width: 2.25em;
}
#media screen and (min-width: 768px) {
section {
padding: 1em 7em;
}
}
#media screen and (min-width: 992px) {
section {
padding: 1em;
}
.card {
padding: 5em 2em;
}
.column {
flex: 1 1 50%;
max-width: 50%;
padding: 0 1em;
}
}
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap" rel="stylesheet">
<section>
<div class="row">
<h1>Características</h1>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-friends"></i>
</div>
<h3>Capacidad</h3>
<p>
De 500 hasta 1,000 personas.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-couch"></i>
</div>
<h3>Mobiliario</h3>
<p>
Mobiliario incluido.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-glass-cheers"></i>
</div>
<h3>Bebidas</h3>
<p>
Refrescos y café
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-money-bill-wave-alt"></i>
</div>
<h3>Apartado</h3>
<p>
Apartado con $15,000.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-utensils"></i>
</div>
<h3>Mantelería</h3>
<p>
Mantelería, cubertería y vajilla.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-wine-bottle"></i>
</div>
<h3>Alcohol</h3>
<p>
Descorche libre.
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-money-bill"></i>
</div>
<h3>Liquidación</h3>
<p>
Liquidar 20 días antes del evento
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-lightbulb"></i>
</div>
<h3>Iluminación</h3>
<p>
Videos musicales,iluminación y robótica.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-check"></i>
</div>
<h3>Personal</h3>
<p>
Mesero, personal y maestro de ceremonias.
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-comments-dollar"></i>
</div>
<h3>Mensualidades.</h3>
<p>
Manejamos los mejores precios a mensualidades.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fab fa-black-tie"></i>
</div>
<h3>Entretenimiento</h3>
<p>
DJ y batucada.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-fan"></i>
</div>
<h3>Florería</h3>
<p>
Centro de flores
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-clock"></i>
</div>
<h3>Servicio.</h3>
<p>
Servicio hasta por 5hrs.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-cloud-meatball"></i>
</div>
<h3>Menú</h3>
<p>
Menú a 3 tiempos
</p>
</div>
</div>
</div>
</section>
In such scenarios, you have have also define a min-height, max-height or min-width, max-width depending upon the dimension that you're trying to control. Because the content is dynamic & the same goes for any images you might have in the content. Try it via using above styles, you'll get what you need.
I'm trying to align an image (a flag) with a text. Like in this footer:
I'm trying style="display:inline-block;" elements but the text and image go to far to the left:
Original footer: (Blue arrow indicates a gap)
Codepen
https://codepen.io/anon/pen/xNNrQW
Remove display:inline-block from 'footer_text_right' and wrap the name 'Peru' inside a span tag
CODEPEN
.padding-top3 {
padding-top: 3%;
}
.padding-bottom2 {
padding-top: 2%;
}
#footer-navbar {
background-color: #ededed;
}
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
zoom:1;
*display:inline;
/* this fix is needed for IE7- */
}
.footer_text {
font-size: 14px;
font-weight: bold;
letter-spacing: .2em;
padding: 0px;
margin: 0px;
}
.footer_nav_links {
margin-right: 2%;
}
.footer_icons {
font-size: 18px;
color: #bfbfbf;
}
.footer_icons:hover {
color: #707070;
}
.footer_ul {
width: 100%;
}
.margin-right3 {
margin-right: 3%;
}
/* new css */
.footer_text_right img {
min-width: 15px;
}
.footer_text_right span {
display: inline-block;
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="">
<div id="footer-navbar" class="footer_text">
<div class="container padding-top3 padding-bottom2">
<div class="row">
<div class="col-md-7">
<ul class="footer_ul">
<li class="footer_nav_links">
<a class="" href="/quienes_somos/">¿Quiénes somos?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/como_comprar/">¿Cómo comprar?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/contactanos/">Contáctanos</a>
</li>
</ul>
</div>
<div class="col-md-5">
<div class="margin-right15">
<p class="footer_text_right text-right"><img style="display:inline-block; align:center;vertical-align: middle;" src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/peru-square-flag.jpg"
width="5%" height="5%">
<span>Perú</span></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<ul class="footer_ul footer-links">
<li class="margin-right3"><i class="fab fa-twitter footer_icons"></i></i></li>
<li class="margin-right3"><i class="fab fa-instagram footer_icons"></i></i></li>
<li class="margin-right3"><i class="fab fa-facebook-square footer_icons"></i></i></li>
<li class="margin-right3"><i class="fab fa-youtube footer_icons"></i></i></li>
</ul>
</div>
<div class="col-md-5 text-right">
<div class="right margin-right15">
<span class="footer_text_right">© 2019 StickersGallito</span>
<a class="footer_text_right" href="/legal/privacy">Términos</a> & <a class="footer_text_right" href="/legal/terms">Condiciones</a>
</div>
</div>
</div>
</div>
</div>
<p class="footer_text_right text-right" style="display:inline-block;vertical-align: middle; float:right;"><img style="display:inline-block; align:center;vertical-align: middle;" src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/peru-square-flag.jpg" width="15%" height="15%"> Perú</p>
Try this it works !!
Take out the img from p element and remove the inline style -- you use bootsrap so all you have to do is to set row class to wrap div (wrap of the p and img)
.padding-top3 {
padding-top: 3%;
}
.padding-bottom2 {
padding-top: 2%;
}
#footer-navbar {
background-color: #ededed;
}
ul>li {
display: inline-block;
zoom: 1;
display: inline;
}
.footer_text {
font-size: 14px;
font-weight: bold;
letter-spacing: .2em;
padding: 0px;
margin: 0px;
}
.footer_nav_links {
margin-right: 2%;
}
.footer_icons {
font-size: 18px;
color: #bfbfbf;
}
.footer_icons:hover {
color: #707070;
}
.footer_ul {
width: 100%;
}
.margin-right3 {
margin-right: 3%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="">
<div id="footer-navbar" class="footer_text">
<div class="container padding-top3 padding-bottom2">
<div class="row">
<div class="col-md-7">
<ul class="footer_ul">
<li class="footer_nav_links">
<a class="" href="/quienes_somos/">¿Quiénes somos?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/como_comprar/">¿Cómo comprar?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/contactanos/">Contáctanos</a>
</li>
</ul>
</div>
<div class="col-md-5">
<div class="row">
<p class="footer_text_right text-right">Perú</p>
<img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/peru-square-flag.jpg" width="5%" height="5%">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<ul class="footer_ul footer-links">
<li class="margin-right3"><i class="fab fa-twitter footer_icons"></i></li>
<li class="margin-right3"><i class="fab fa-instagram footer_icons"></i></li>
<li class="margin-right3"><i class="fab fa-facebook-square footer_icons"></i></li>
<li class="margin-right3"><i class="fab fa-youtube footer_icons"></i></li>
</ul>
</div>
<div class="col-md-5 text-right">
<div class="right margin-right15">
<span class="footer_text_right">© 2019 StickersGallito</span>
<a class="footer_text_right" href="/legal/privacy">Términos</a> & <a class="footer_text_right" href="/legal/terms">Condiciones</a>
</div>
</div>
</div>
</div>
</div>
Please do style like this
<p class="footer_text_right text-right " style="display:inline-block;vertical-align: middle; float:right">Perú</p>
<img style="display:inline-block; margin-top:2px; float:right; vertical-align:middle" src="https://images.pexels.com/photos/237018/pexels-photo-237018.jpeg?cs=srgb&dl=asphalt-beauty-colorful-237018.jpg&fm=jpg" width="5%" height="5%" />
I checked this code in your codepen and it works fine.In stacks code snippet,due to small space its not showing well.
Please try this :
<div class="margin-right15" style=" text-align:right;">
Add style with class="margin-right15", its working and align right side.
See Umbrella image in images:
Full-size window:
.
Reduced (ideal placement):
I would like to have my umbrella image in the centre of the screen no matter the size of the window.
It works from the point where the window shrinks and works in mobile view too.
I've tried various methods but it doesn't seem to be working, any tips would be greatly appreciated.
Here is my code:
HTML
<div class="wrapper">
<div class="page2">
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3>Welcome</h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3> Kyoto</h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3>Best of 2018</h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png">
</div>
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="ul_footer">
<li>Work With Me</li>
<li>
Contact</li>
</ul>
</div>
</footer>
</div>
</div>
</div>
CSS
.page2{
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 100%;
}
//cards
.wrap{
width:960px;
margin:auto;
margin-top: 100px;
}
.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
transition: 0.4s;
width: 300px;
text-align: center;
font-size: 16px;
float:left;
margin:10px;
text-decoration: none;
}
.page3{
margin: 20px;
margin-top: 20px;
height: 30%;
}
.umbrella_icon {
text-align: center;
}
.footer {
z-index: 1000;
width: 960px;
margin: 0 auto;
}
Use dispaly:flex to .wrap
See working code
.page2{
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 100%;
}
.wrap{
margin: auto;
margin-top: 100px;
display: flex;
}
.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
transition: 0.4s;
width: 300px;
text-align: center;
font-size: 16px;
float:left;
margin:10px;
text-decoration: none;
}
.page3{
margin: 20px;
margin-top: 20px;
height: 30%;
}
.umbrella_icon {
text-align: center;
}
.footer {
z-index: 1000;
width: 960px;
margin: 0 auto;
}
<div class="wrapper">
<div class="page2">
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3>Welcome</h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3> Kyoto</h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3>Best of 2018</h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png" alt="umbrella">
</div>
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="ul_footer">
<li>Work With Me</li>
<li>
Contact</li>
</ul>
</div>
</footer>
</div>
</div>
</div>
End The page 2 div before starting page 3 div.
Change the page3 css to
.page3{
margin: 50vh 50vw;
}
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3>Welcome</h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3> Kyoto</h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3>Best of 2018</h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png" alt="umbrella Here">
</div>
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="ul_footer">
<li>Work With Me</li>
<li>
Contact</li>
</ul>
</div>
</footer>
</div>
Use flex for .wrap like this :
.wrap{
width:960px;
margin:auto;
margin-top: 100px;
display: flex;
justify-content: center;
}
this code make image in center horizontally.
I have a pretty weird situation here.
I have this HTML:
<!DOCTYPE html>
<html>
<head>
<title>Notes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
test1
</p>
<a href="/notes/pin/1" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>testtt</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/4" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>- test</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
</div>
<div style="padding-top:50px;"></div>
<!--- NON-PINNED -->
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/2" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Testi</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Dhchjc
</p>
<a href="/notes/pin/3" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Djfjgn<br>- eat 🌮</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Fhfj
</p>
<a href="/notes/pin/5" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Brjdjc</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
</div>
<a href="/notes/new/">
<div id="floating-button" data-toggle="tooltip" data-placement="left" data-original-title="Create">
<p class="plus">+</p>
</div>
</a>
</body>
</html>
And my CSS:
#floating-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: #db4437;
position: fixed;
bottom: 30px;
right: 30px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
}
.column {
margin-top: 10px;
}
.card {
margin-left: 10px;
margin-right: 10px;
max-height: 500px;
}
When viewing on regular desktop mode, everything is fine.
When on Chrome + mobile viewport, there is a slight overflow on the x axis.
When viewing on Firefox + mobile viewport, it is fine.
When removing the script tag importing Font-Awesome, there are no longer any problems on Chrome. The font-awesome CSS CDN also causes this.
There are two columns because one is for pinned notes (displayed first) and the other for regular ones.
The problem
When on Chrome with mobile viewport, the page width is larger than the viewport, but not with Firefox. I fixed it by remove the script tag importing Font-Awesome, but I would need font awesome and it's icons.
I've fixed this by adding .columns { margin-right:0px;margin-left:0px;} to the CSS. See this bulma issue.
Here is my codepen: https://codepen.io/LastSoldi3r/pen/OmjGgR
HTML:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://use.fontawesome.com/1ade2ea03e.js"></script>
</head>
<body>
<ul>
<li><a class="active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><i class="fa fa-info-circle" aria-hidden="true"></i> About</li>
<li><i class="fa fa-folder-open" aria-hidden="true"></i> Portfolio</li>
<li><i class="fa fa-address-book" aria-hidden="true"></i> Contact</li>
</ul>
<div class="container-fluid" style="margin-left: 10%; padding: 1px ;">
<a name="home">
<div class="row">
<div class="col-md-12">
<img width="100%" height="100%" class="code" src="http://cdn2.cloudpro.co.uk/sites/cloudprod7/files/java_0.jpg">
<img class="nametag" src="http://i.imgur.com/12ZcxYW.png">
</div>
</div>
</div>
<div class="container-fluid text" style="margin-left: 10%; padding: 1px 16px;">
<!--About Me-->
<a name="about">
<h2 align="center">About</h2><br>
<div class="row">
<div class="col-md-6">
<p id="aboutMe">I earned my Associates of Science for Information Technology in 2015. I am now working on my certification in Front End Web Development with the end goal of being a certified Full Stack Web Developer. I am achieving this goal with the help of freeCodeCamp().</p>
<div class="col-md-12">
<h2 align="center">Skills</h2><br>
</div>
<div class="row">
<div class="col-md-3 skills">
<i class="fa fa-coffee"></i>
<p>JAVA</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-html5"></i>
<p>HTML5</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-css3"></i>
<p>CSS3</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-code"></i>
<p>JAVASCRIPT</p>
</div>
</div>
</div>
<div class="col-md-6">
<img width="50%" height="50%" src="https://scontent.fhsv1-1.fna.fbcdn.net/v/t1.0-9/15219976_10153891163957294_6687591802937802260_n.jpg?oh=dccd86082954a5d9d1764fbd53ad70dc&oe=5982B68A">
</div>
</div>
<!--Portfolio-->
<br><br>
<a name="portfolio">
<div class="well background">
<h2 align="center">Portfolio</h2><br>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #011f4b !important;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #b3cde0;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #005b96;
color: white;
}
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
}
#aboutMe {
font-size: 20px;
}
.code {
position: relative;
top: 0;
left: 0;
}
.nametag {
position: absolute;
top: 35px;
left: 60px;
}
.skills {
text-align: center;
font-size: 1.7em;
width: 110%;
}
.background {
background-color: #03396c !important;
}
I understand that you can change the css within bootstrap itself to change these effects. However, I am learning and seeing as I am new I just used the link provided on the bootstrap website instead of sifting through the css. If you look at my pen you will see that hovering over any text well darken it and underline some parts.
I have tried overriding the code in various ways.
My most recently tried, and most commonly found solution:
a.hover {text-decoration: none !important;}
This has not worked for me and I haven't been able to find any other working solution.
add this simple code to your css file :
html a:hover {
text-decoration: none !important;
}
here is how your page will shown :
html a:hover {
text-decoration: none !important;
}
body {
background-color: #011f4b !important;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #b3cde0;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #005b96;
color: white;
}
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
}
#aboutMe {
font-size: 20px;
}
.code {
position: relative;
top: 0;
left: 0;
}
.nametag {
position: absolute;
top: 35px;
left: 60px;
}
.skills {
text-align: center;
font-size: 1.7em;
width: 110%;
}
.background {
background-color: #03396c !important;
}
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://use.fontawesome.com/1ade2ea03e.js"></script>
</head>
<body>
<ul>
<li><a class="active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><i class="fa fa-info-circle" aria-hidden="true"></i> About</li>
<li><i class="fa fa-folder-open" aria-hidden="true"></i> Portfolio</li>
<li><i class="fa fa-address-book" aria-hidden="true"></i> Contact</li>
</ul>
<div class="container-fluid" style="margin-left: 10%; padding: 1px ;">
<a name="home">
<div class="row">
<div class="col-md-12">
<img width="100%" height="100%" class="code" src="http://cdn2.cloudpro.co.uk/sites/cloudprod7/files/java_0.jpg">
<img class="nametag" src="http://i.imgur.com/12ZcxYW.png">
</div>
</div>
</div>
<div class="container-fluid text" style="margin-left: 10%; padding: 1px 16px;">
<!--About Me-->
<a name="about">
<h2 align="center">About</h2><br>
<div class="row">
<div class="col-md-6">
<p id="aboutMe">I earned my Associates of Science for Information Technology in 2015. I am now working on my certification in Front End Web Development with the end goal of being a certified Full Stack Web Developer. I am achieving this goal with the help of freeCodeCamp().</p>
<div class="col-md-12">
<h2 align="center">Skills</h2><br>
</div>
<div class="row">
<div class="col-md-3 skills">
<i class="fa fa-coffee"></i>
<p>JAVA</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-html5"></i>
<p>HTML5</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-css3"></i>
<p>CSS3</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-code"></i>
<p>JAVASCRIPT</p>
</div>
</div>
</div>
<div class="col-md-6">
<img width="50%" height="50%" src="https://scontent.fhsv1-1.fna.fbcdn.net/v/t1.0-9/15219976_10153891163957294_6687591802937802260_n.jpg?oh=dccd86082954a5d9d1764fbd53ad70dc&oe=5982B68A">
</div>
</div>
<!--Portfolio-->
<br><br>
<a name="portfolio">
<div class="well background">
<h2 align="center">Portfolio</h2><br>
</div>
</div>
</body>
</html>
You were super close!
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
text-decoration: none;
}
Here is a forked example of what you are looking for:
https://codepen.io/anon/pen/NjaobY
I just added text-decoration: none to your existing CSS. https://codepen.io/anon/pen/Lyzqxp
Replace a.hover with a:hover and it should work.
.hover means "class named hover"
:hover means "when the element is hovered"
If you're using Chrome, the Developper Tools (right click -> inspect element) -or similar firebug features- will allow you to see what css is being rendered on any element.
you should override bootstrap style by "!important" please use this:
https://codepen.io/houtan/pen/mmBvop