Aligning an image to the right of text - javascript

I want to align this image to the right side of the text but I am unable to do this. All the ways I have tried but in the end, the image appears below the text contrary to what I want actually.
In my assumption, I have written the correct code.
Please see the image here.
Here is what I have in my code:
<!--Intro Page start-->
<section id="intro">
<div class="wrapper">
<div class="intro-left">
<h1>Creative Insights to Grow your Business</h1>
<p>The world's most widely deployed real-time content recomendations engine. Brought to you by Pulse Analytics.</p>
<a href="#" class="intro-cta">
Try it for Free
</a>
</div>
<div class="intro-right">
<img src="images/undraw_growth_analytics_8btt.png" alt="">
</div>
</div>
</section>
And here is the CSS:
#intro{
position: absolute;
overflow: hidden;
min-height: 600px;
padding-top: 9em;
}
#intro .intro-left{
display: inline-block;
width: 100%;
max-width: 400px;
padding: 3em 0;
}
#intro .intro-left h1{
font-size: 2.5em;
color: #241b57;
line-height: 1.5em;
position: relative;
margin-bottom: 1em;
}
#intro .intro-left h1::after{
bottom: -24px;
left: 0;
width: 50px;
height: 4px;
content: '';
border-radius: 5px;
background: #ec4357;
opacity: 0.4;
position: absolute;
}
#intro .intro-left p{
font-size: 1.125em;
line-height: 1.75em;
}
#intro .intro-left a.intro-cta{
font-weight: 500;
display: block;
width: 100%;
max-width: 180px;
margin-top: 2em;
text-align: center;
color: #ffffff;
border-radius: 3px;
background-color: #ec4357;
padding: 1em;
}
#intro .intro-right{
position: relative;
display: inline-block;
margin-left: 6em;
}
#intro .intro-right img{
max-width: 600px;
}
Please let me know where is my error. Thanks!


use flex for wrapper class:
#intro {
position: absolute;
overflow: hidden;
min-height: 600px;
padding-top: 9em;
}
.wrapper {
display: flex;
}
#intro .intro-left {
display: inline-block;
width: 100%;
max-width: 400px;
padding: 3em 0;
}
#intro .intro-left h1 {
font-size: 2.5em;
color: #241b57;
line-height: 1.5em;
position: relative;
margin-bottom: 1em;
}
#intro .intro-left h1::after {
bottom: -24px;
left: 0;
width: 50px;
height: 4px;
content: '';
border-radius: 5px;
background: #ec4357;
opacity: 0.4;
position: absolute;
}
#intro .intro-left p {
font-size: 1.125em;
line-height: 1.75em;
}
#intro .intro-left a.intro-cta {
font-weight: 500;
display: block;
width: 100%;
max-width: 180px;
margin-top: 2em;
text-align: center;
color: #ffffff;
border-radius: 3px;
background-color: #ec4357;
padding: 1em;
}
#intro .intro-right {
position: relative;
display: inline-block;
margin-left: 6em;
}
#intro .intro-right img {
max-width: 600px;
}
<section id="intro">
<div class="wrapper">
<div class="intro-left">
<h1>Creative Insights to Grow your Business</h1>
<p>The world's most widely deployed real-time content recomendations engine. Brought to you by Pulse Analytics.</p>
<a href="#" class="intro-cta">
Try it for Free
</a>
</div>
<div class="intro-right">
<img src="http://placekitten.com/301/301" alt="">
</div>
</div>
</section>

Related

My toggle button will not switch from left to right, I have coded in JavaScript and cannot find the bug?

First someone suggested it was a typo with my classList property and I made the necessary changes but it still is not working. I have js node downloaded but it still is not responding. Can anyone help? I cant yet find the bug i need some extra help. I have posted my css javascript and html files below
Here is my work..
var btn = document.getElementById("btn");
function togglebtn() {
btn.classList.toggle(".active");
}
*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
box-sizing: border-box;
}
.hero{
background: #1d2026;
min-height: 100vh;
width: 100%;
color: #fff;
position: relative;
}
nav{
display: flex;
align-items: center;
}
nav .menu{
padding-right: 30px;
padding-left: 10px;
padding-bottom: 40px;
cursor: pointer;
}
nav .logo{
width: 500px;
height: 200px;
object-fit: none;
padding-right: 50px;
padding-bottom: 60px;
}
nav ul{
flex: 1;
text-align: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
list-style: none;
margin-right: 20px;
padding-bottom: 100px;
font-size: 25px;
margin: 0 20px;
}
nav ul a{
text-decoration: none;
color: #fff;
}
nav button{
background: #efefef;
height:30px ;
width: 60px;
border-radius: 20px;
border: 0;
outline: 0;
cursor: pointer;
margin-bottom: 100px;
margin-right: 20px;
}
nav button span{
display: block;
background: #999;
height: 26px;
width: 26px;
border-radius: 50%;
margin-left: 2px;
}
.lamp-set{
position: absolute;
top: -20px;
left: 22%;
width: 200px;
}
.lamp{
width: 100%;
}
.light{
position: absolute;
top: 97%;
left: 50%;
transform: translateX(-50%);
width: 700px;
margin-left: -10px;
opacity: 1;
}
.text-container{
max-width: 1000px;
margin-top: 2%;
margin-left: 50%;
}
.text-container h1{
font-size: 80px;
font-weight: 400;
display: inline-block;
color: #fff;
}
.text-container p{
font-size: 40px;
font-weight: 200;
display: inline-block;
color: #fff;
margin-top: 10px;
}
.emails{
background: #00a8f3;
padding: 14px 40px;
display: inline-block;
color: #fff;
font-size: 25px;
margin-top: 30px;
margin-left: 50%;
border-radius: 30px;
}
.active{
background: turquoise;
}
.active span{
background:#ffff ;
margin-left: 31px;
}
<div class="hero">
<nav>
<img src="menu.png" class="menu">
<img src="ovlogo.png" class="logo">
<ul>
<li>
<a href="">
Home
</li>
<li><a href="">contact</li>
<li><a href="">shop</li>
</ul>
<button type="button" onclick="togglebtn()" id="btn"><span></span></button>
</nav>
<div class="lamp-set">
<img src="lamp.png" class="lamp">
<img src="light.png" class="light">
</div>
<div class="text-container">
<h1>One Stop Shop.</h1>
<p>Get the latest "as seen on" products and appliances that fit you and your everyday needs.We specialize in variety and identifying cunsumer sentiment to maximize the expirence with overviral, your online marketplace. </p>
</div>
<div class="emails">
subscribe for emails
</div>
</div>

You have to remove the "." from the toggle function className.
function togglebtn() {
btn.classList.toggle("active"); // remove the "." from the class name
}

Footer only works when Zoom Text Only is set in Firefox, text overflows if no Zoom Text Only?

I have a semi-working HTML template for a car showroom, but this can be modified for any items for sale list:
body {
background-color: #FFF;
font-family: Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
header.sct1 {
background-color: #2B60DE;
border-radius: 0px;
color: #FFF;
margin: 10px;
padding: 20px;
}
img.logo1 {
width: 200px;
}
.wrapper {
border: 2px solid;
}
.content {
background-color: #FFF;
margin: 10px;
width: 800px;
margin-left: 20px;
}
footer.sct1 {
background-color: #2B60DE;
color: #FFF;
margin: 10px;
padding: 10px;
}
footer.caautos h2, footer.caautos h3 {
margin: 10px;
}
div.caautos1 {
width: 900px;
display: inline-grid;
grid-template-columns: 400px 2fr;
grid-column: 1 / span 1;
column-gap: 90px;
}
div.content {
background-color: #FFF;
width: 800px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
div.content p {
margin-left: 5px;
}
.results-vehicleresult {
margin: 20px;
}
.columns-vehicleresult {
border-radius: 0px;
background-color: #FFFFFF;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
border: 2px solid;
margin-bottom: 20px;
}
.columns-vehicleresult {
font-size: 0.8rem;
margin-left: 90px;
}
.columns-vehicleresult .column {
flex: 33.33%;
}
/*
.columns-vehicleresult .column p {
color: #333;
font-family: HelveticaCondensed, sans-serif;
font-size: 14px;
transform:scaleX(1.2);
width: 400px;
margin-left: 20px;
margin-top: 20px;
text-transform: uppercase;
}
*/
.columns-vehicleresult .column p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: 400;
margin-left: -5px;
margin-top: 30px;
}
.columns-vehicleresult .column p b {
font-family: Helvetica, sans-serif;
font-weight: 600;
}
h1.eurola {
font-size: 240%;
}
.vehiclesold {
color: red;
}
picture {
flex-direction: row;
max-width: 46%;
margin-left: -20px;
}
/*
picture img {
max-width: 350px;
height: auto;
margin-right: 2px;
margin: 30px;
}
*/
/*
picture img {
max-width: 350px;
height: auto;
max-width: 340px;
margin-right: 2px;
margin: 30px;
}
*/
/*
picture img {
display: inline-block;
width: 262px;
height: 198px;
margin-right: 5px;
margin: 30px;
}
*/
picture img {
display: inline-block;
width: 262px;
margin-right: 5px;
margin: 30px;
}
picture::after {
content: "Image for illustration purposes only";
display: block;
top: 50%;
transform: translateY(-240%);
font-weight: 600;
font-size: 11px;
margin-left: 30px;
}
ul.mauen {
background-color:#333;
color: #FFF;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.mauen li {
float: left;
}
ul.mauen a {
display: block;
padding: 8px;
background-color: #dddddd;
}
ul.imagallery1 {
list-style-type: none;
margin-top: -5px;
margin-left: -30px;
}
.imagallery1 li {
display: inline;
margin: 0;
}
/*
.imagallery1 img {
width: 20%;
height: auto;
}
*/
.imagallery1 img {
background: rgb(247, 247, 245);
width: 100px;
height: 75px;
}
img.hald {
width: 230px;
}
div.logo-112 h2 {
color: yellow;
font-size: 36px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFF;
}
.logo-112 blockquote {
font-weight: 700;
}
img.imglogo1 {
height: 320px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chelsea Motors - Jacksdale, Nottinghamshire - Used cars in Notts, Derbyshire</title>
<link rel="stylesheet" type="text/css" href="styles1/chelsea-motors-jacksdale.css">
</head>
<body>
<div class="wrapper">
<header class="sct1">
<h2>YOUR CAR SHOWROOM</h2>
</header>
<div class="content">
<p>Welcome to Your Car Showroom</p>
<div class="results-vehicleresult">
<div class="columns-vehicleresult">
<picture>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
</picture>
<div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div>
<div class="columns-vehicleresult">
<picture>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
</picture>
<div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div><div class="columns-vehicleresult">
<picture>
<img src="https://live.staticflickr.com/65535/51153373086_9061d66b91_z.jpg">
</picture>
<div class="column">
<p><b>1993 CHEVROLET BUICK CENTURY LIMITED 3.8 V6</b> 4dr, blue <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div>
</div>
</div>
<footer class="sct1">
<div class="caautos1">
<h1>1 Anytown Road, Worksop, Nottinghamshire S80 1AN</h1>
<h1>✆ 01909 496000</h1>
</div>
</footer>
© 2022
</div>
</body>
</html>
For some reason, text overflows if you've set 130% zoom on Firefox as default (which I need to in my default profile) for the div.caautos part within the footer, is there a way to fix CSS per-zoom and make this look slightly better?
It's functional but I want to try and fix any mistakes regarding aesthetics and zoom to ensure it looks and works properly.

when you change page zoom, the browser changes resolution. use #media for a specific resolution.
you can read about that here.

Positioning a span next to an image secondary image label

I'd like the secondary label to be right under "Image Label". Currently it is all the way at the bottom.
I am forcing the secondary label to be under using a line break and then moving it to the right using margin-left. I don't think this is the way to go at all and I tried using margin bottom which will not move the element up.
What is the best way to achieve this using CSS? My code for current result is here: https://codepen.io/codeAligned/pen/gOOByOa
Current:
Desired:
.post-container {
width: 75%;
padding-right: 16px;
padding-left: 16px;
margin-right: 200px;
margin-left: 200px;
padding-bottom: 64px;
padding-top: 64px;
article {
header {
text-align: center;
margin: 0 auto 32px;
a {
text-decoration: none;
transition: color 0.3s ease;
&:focus {
text-decoration: none;
text-decoration-skip-ink: auto;
}
&:active {
text-decoration: none;
}
&:hover {
text-decoration: none;
}
}
}
.avatar {
margin: 16px auto;
text-align: center;
border-radius: 50%;
}
}
}
.bg-img-hero {
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
margin-right: 25px;
height: 400px;
border-radius: 15px;
}
.transition-3d-hover {
transition: all 0.2s ease-in-out;
}
.transition-3d-hover:hover,
.transition-3d-hover:focus {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.story-image {
margin-bottom: 32px;
align-self: center;
img {
display: block;
border-radius: 10px;
width: 80%;
height: 60%;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
}
.post-avatar {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.article-avatar {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-right: 16px;
margin-top: 10px;
margin-bottom: 10px;
}
.tag-text {
font-size: 12px;
}
.avatar-container {
padding-left: 30px;
padding-bottom: 16px;
}
.subtitle {
font-size: 16px;
text-align: left;
}
.subtitle-container {
border-top: solid 1px;
border-bottom: solid 1px;
border-spacing: 5px;
border-color: lightgray;
min-height: 100px;
}
.subtitle-date {
padding-left: 80px;
}
.subtitle-body {
-ms-flex: 1;
flex: 1;
}
.label-position {
margin-left: 80px;
}
<div class="subtitle">
<div class="subtitle-container">
<div class="article-avatar rounded-circle sb-avatar" style="display: inline-block; vertical-align: middle; width: 60px; height: 60px; font-family: Helvetica;">
<img class="article-avatar rounded-circle sb-avatar__image" width="60px" height="60px" src="https://www.kiplinger.com/slideshow/spending/T062-S001-things-millennials-are-changing-forever/images/intro.jpg" style="max-width: 100%; width: 60px; height: 60px;"></div>
<span class="subtitle-body font-size-1 ml-3">
Image label
<br/>
<small class="label-position">secondary label</small>
</span>
</div>
</div>

I recommend using flexbox for these things. You can go through https://www.w3schools.com/css/css3_flexbox.asp
Here your code with quick fix
.subtitle-container{
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.subtitle-container >div{
padding:10px;
}
<div class="subtitle">
<div class="subtitle-container">
<div class="article-avatar rounded-circle sb-avatar" style="display: inline-block; vertical-align: middle; width: 60px; height: 60px; font-family: Helvetica;">
<img class="article-avatar rounded-circle sb-avatar__image" width="60px" height="60px" src="https://www.kiplinger.com/slideshow/spending/T062-S001-things-millennials-are-changing-forever/images/intro.jpg" style="max-width: 100%; width: 60px; height: 60px;"></div>
<div>
<span class="subtitle-body font-size-1 ml-3">
Image label
<br/>
<small class="label-position">secondary label</small>
</span>
</div>
</div>
</div>

With flex you do
<div class="container">
<div>
// your image here
</div>
<div class="label">
<div><span>Image label</span></div>
<div><small>Secondary label</small></div>
</div>
</div>
And add your css
.container {
display: flex;
}
The default direction is row so divs inside .container will stand next to each other while the divs inside .label will stack on each other because div is a block element

CSS: responsive design, position card to fit in the middle any size of screen

I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper img {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
*/
width: 100%;
height: 100%;
object-fit: cover;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fcc951ea7fb4756657e6a7d042bf28f3/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/cc7f49ae37334eff4a2e844ffbebaa21/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/d8b9d0e098128aad6eac6c39c19439cb/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/a0efc75790b1d1a20306b4b9ee8c0d31/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fa49d4e551525ac7a288784e0866f7cf/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/845ad7174d012da1d1b62ac375d2b466/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/7d4877bc850a66d5aeb539c5510add7e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/5252d016bae25d4ef4bca9e0c0a0306b/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/880acf9db110584cb44b3b69ad0a366f/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br/><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,964</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
Basically what should I do to adjust it from (too small)to this (ideal)

Just change it:
.shots .shot {
overflow: hidden;
position: relative;
width: 33%; // <-- change it
height: 100px;
flex-grow: 1; // <-- add
}

I would use media queries and target the classes you want to amend on the different screen sizes to make it fit as you need. Some useful links:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
In your case, you would need to amend the width of the card to 100% on mobile to achieve the design on your screenshot. Hope that makes sense! :)

Visual Studio 2015 is not completely loading my stylesheet

Visual Studio 2015 is not completely loading my stylesheet so there are some elements missing when I test it. I'm not sure how to fix this issue. I'm new to Visual Studio so I'm not sure where the problem is. I've included my html & css files. Thank you
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Your ASP.NET application</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="home">
<div id="header">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="styledimg"></div>
</nav>
</div>
</div>
<div id="head-soc">
<div id="linkedin-icon">Linkedin</div>
<div id="youtube-icon">Youtube</div>
<div id="facebook-icon">Facebook</div>
</div>
<div class="content"><p>Create, Collaborate, Innovate</p></div>
<div class="fadein">
<img src="images/pic1.png" alt="" style="width: 90%; height: 825" class="active" />
<img src="images/pic2.png" alt="" style="width: 90%; height: 825;" />
<img src="images/pic3.png" alt="" style="width: 90%; height: 825;" />
<img src="images/pic4.png" alt="" style="width: 90%; height: 825;" />
</div>
</div>
<div id="about">
<div class="wrapper">
<h4>Titus Jackson</h4>
<p>Film Maker ~ Screen Writer ~ Editor</p>
</div>
<img src="Images/Titus-Jackson1.jpg" alt="Titus Jackson" width="425" height="365" border="0" />
<div id="section2">
<p>
For over 15 years <span>Cinemuze</span> has had the honor of working with some of the most talented creative collaborators Tulsa has to offer. We love working
on a variety of projects. As it is our goal to be a well rounded company with our fingers in a lot of pies.
</p>
<p>
Our paramount value is to approuch the material with excellence and an orignal point of view to tell a unique and compelling story. It is our belief that
life is what you make of it, and the saddest lost is not to explore all your potential in the short time you've been given.
</p>
<p>
We've had the opportunity to work on multiple feature films and national television shows ranging from christian television to TLC television. We've created
mulitple award winning music videos, short films and evevn a feature film. Feel free to take a look around the site, drop us an email, we look forward to hearing
from you.
</p>
<img src="images/email1.png" alt="email1" width="26" height="26" />
</div>
</div>
<div id="projects">
<h5>View our current projects</h5>
<ul>
<li>
<iframe width="265" height="200" src="https://www.youtube.com/embed/8CZJzUk7fFM" frameborder="0" allowfullscreen></iframe>
<p>Eugene Gregory Promo</p>
</li>
<li>
<iframe width="265" height="200" src="https://www.youtube.com/embed/cLm3Vh4_Ruc" frameborder="0" allowfullscreen></iframe>
<p>Family Cup Promo</p>
</li>
<li>
<iframe width="265" height="200" src="https://www.youtube.com/embed/2t9-vVNgF7c" frameborder="0" allowfullscreen></iframe>
<p>This Generation</p>
</li>
</ul>
</div>
<div id="contact">
<section3>
<h3>To connect with us:</h3>
<p><span>Cinemuze</span> is based in Tulsa, Oklahoma and travels widely for a variety of projects.</p>
<p>If your interested in our work, you can connect with us via email or phone.</p>
</section3>
<div class="section4">
<img src="images/email1.png" alt="email" width="26" height="26" />
<a href="mailto:titusjackson#mac.com">
<p>titusjackson#mac.com</p>
</a>
<img src="images/phone.png" alt="phone" width="24" height="24" />
<p>+1 (918) 671-3340</p>
</div>
</div>
<footer>
</footer>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function() {
$('.fadein :first-child').fadeOut(2000)
.next('img').fadeIn(2000)
.end().appendTo('.fadein');},
3000);
});
</script>
</body>
</html>
My CSS
#charset "UTF-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
#header {
width: 100%;
margin-top: -15px;
position: fixed;
background-color: rgba(60,59,59,1.00);
transition-duration: 1s;
z-index: 25;
}
div#header nav {
width: 1425;
height: 110px;
}
div#header ul {
list-style: none;
margin-left: 100px;
float: left;
}
div#header li {
float: left;
margin-left: 64px;
margin-top: 10px;
}
div#header a {
color: white;
text-decoration: none;
line-height: 45px;
font-size: .9em;
text-transform: capitalize;
}
div#header a:hover {
color: rgba(249,0,3,1.00);
}
div#styledimg {
background-image: url(images/logo.png);
background-repeat: no-repeat; width: 224px;
height: 85px;
float: right;
margin-right: 150px;
margin-top: 10px;
}
/*page-specific header styles*/
#header {
background-color: rgba(60,59,59,1.00);
width: 1425;
height: 110px;
}
/* layout styles*/
/*home page*/
div#home {
height: 950px;
background-color: transparent;
}
.fadein {
position: relative;
width: 100%;
height: 825px;
}
.fadein img {
border: 80px solid rgba(60,59,59,1.00);
height: 825;
position: absolute;
left: -225px;
top: -35px;
z-index: -9;
}
#header {
background-color: rgba(60,59,59,1.00);
}
#head-soc {
width: 129;
height: 86;
margin: 10px;
padding: 0px;
float: right;
margin-right: 40px;
margin-top: 300px;
right: 25px;
position: fixed;
z-index: 25;
}
#head-soc a {
margin-top: 10px;
margin-right: 20px;
}
#linkedin-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(Images/socialsprites_white.png);
display: block;
float: right;
background-position: 0px 0px;
}
#linkedin-icon a:hover {
background-image: url(Images/socialsprites_white.png);
background-position: 0px -43px;
}
#youtube-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(Images/socialsprites_white.png);
display: block;
float: right;
margin-left: 20px;
background-position: -43px 0px;
}
#youtube-icon a:hover {
background-image: url(Images/socialsprites_white.png);
background-position: -43px -43px;
}
#facebook-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(Images/socialsprites_white.png);
display: block;
float: right;
background-position: -86px -85px;
}
#facebook-icon a:hover {
background-image: url(Images/socialsprites_white.png);
background-position: -86px -128px;
}
.content p {
font-family: BlairMdITC TT-Medium;
font-size: 44px;
width: 550px;
left: 50%;
margin-left: -15%;
margin-top: 25%;
color: rgba(249,0,3,1.00);
position: absolute;
}
/* about page*/
div#about {
background-color:rgba(188,184,184,1.00);
height: 550px;
margin-top: -5px;
padding-top: 100px;
z-index: 35;
}
.wrapper h4 {
font-famiy: Geneva;
font-size: 25px;
padding-left: 224px;
color: rgba(249,0,3,1.00);
margin-bottom: -20px;
}
.wrapper p {
font-family: Geneva;
font-size: 12px;
margin-left: 226px;
margin-top: 20px;
margin-bottom: 15px;
color: rgba(134,133,133,1.00);
}
h6 {
padding-left: 225px;
margin-top: -20px;
margin-bottom: 10px;
color: rgba(60,59,59,1.00);
}
img {
float: left;
margin-left: 225px;
margin-right: 15px;
}
#section2 {
font-family: Helvetica;
font-size: 16px;
color: rgba(60,59,59,1.00);
width: 1280px;
padding-top: -80px;
height: 300px;
}
#section2 p {
color: rgba(60,59,59,1.00);
}
#section2 img {
margin-left: 2px;
}
span {
color: rgba(249,0,3,1.00);
}
/* projects page */
div#projects {
background-color: #3A3939;
background-position: 25px;
height: 450px;
margin: 0px;
line-height: 0;
padding-top: 25px;
}
div#projects ul {
list-style: none;
margin-left: 100px;
float: left;
}
div#projects li {
float: left;
margin-top: 65px;
margin-left: 120px;
}
div#projects li p {
margin-left: 20px;
text-align: center;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00)
}
#media only screen and (max-width: 632px) {
div#projects li {
float: none;
margin-top: 65px;
margin-left: 95px;
}
div#projects li p {
margin-left: 10px;
text-align: center;
}
}
div#projects h5 {
margin-left: 650px;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
color:rgba(179,178,178,1.00);
padding-bottom: 45px;
margin-bottom: -15px;
}
p {
font-size: 16px;
margin-left: 195px;
color: rgba(249,247,247,1.00);
}
/* contact page */
div#contact {
background-image:url(images/studio4.png);
background-size: cover;
background-attachment: fixed;
padding-top: 35px;
padding-bottom: 100px;
}
section3 h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: rgba(249,0,3,1.00);
margin-left: 660px;
margin-top: 75px;
}
section3 p {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: rgba(255,255,255,1.00);
width: 650px;
padding-left: 85px;
margin-left: 385px;
}
.section4 {
font-family: Helvetica, sans-serif;
font-size: 16px;
color: rgba(255,255,255,1.00);
margin-left: 440px;
margin-top: 50px;
}
.section4 a {
text-decoration: none;
}
.section4 a p:hover {
color: rgba(249,0,3,1.00);
}
/* ~~ The footer ~~ */
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
display: block;
}

So the style sheet shows up, it's just the images referenced in your style sheet that aren't showing? When I've had that problem, it's either an incorrect filepath or the content files haven't actually been added to the project. If you right click on your images folder and click "Add > Existing Item" for all your images, that fixes the problem (for me at least) sometimes.

Categories