I developed a site for a project with a few videos etc. The web browser based version is fine but mobile is zoomed in and needs pinched and zoomed out to get it correct. Whats the method to get that correct on load? I'm guessing some #media query.
I have this in my head
<meta content='width=device-width, initial-scale=1, maximum-scale=1' <!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />
<title>ReBreak News</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<link rel="stylesheet" href="/bootstrap.min.css"></script>
<link rel="stylesheet" href="/fontawesome/css/fontawesome.min.css"></script>
<script src="jquery.js"></script>
<script src="fontawesome.js"></script>
<script defer src='/build/bundle.js'></script>
<script src="bootstrap.js"></script>
</head>
and my global.css
:root {
--gradient: linear-gradient(90deg, #ff0000 0%, #ff0000 100%);
--light: #fff;
--grey: #f8f9fa;
}
html,
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
scroll-behavior: smooth;
}
.main-bgcolor {
background-image: var(--gradient);
}
.main-bgcolor2 {
background-color: #ffffff;
}
.light-color {
color: var(--light) !important;
}
.grey-bgcolor {
background: var(--grey);
}
.company_brand {
font-size: x-large;
font-family: cursive;
}
.section {
padding: 50px 0;
}
.section-body {
padding: 20px 0;
}
.h1{
color: blueviolet;
}
Thanks
Related
I Want to make it so the 100 appears in the top right corner of my div, I have it aligned to the right but it still appears on the bottom. Is there an easy way for me to fix it in CSS? I want it to look like the The character select cards in destiny 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<div class="titan">
<h2>Titan</h2>
<h3>Exo Male</h3>
<h1>100</h1>
</div>
<script src="../js/index.js" async defer></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300');
body{
background-image: url(../assets/bg.PNG);
background-repeat: no-repeat;
background-size: cover;
}
.titan{
background-image: url('../assets/titan.PNG');
width: 474px;
height: 96px;
}
h1{
color: #31ccf3;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
float: right;
}
h2{
color: white;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
}
h3{
color: #c9c9c9;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
font-size: 1em;
}
The code is not clean (from a CSS perspective), however I would suggest doing display:flex;, justify-content:space-between; and align-items:center; on titan div, then add the first 2 heading in a div.
Further improvements I would do is to get rid of padding from Headings. This is bad practice. You should have the heading in a div that is positioned the way that you want and not apply directly padding on Headings unless if you are 100% sure that all the headings will follow this pattern globally.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300');
body {
background-image: url(../assets/bg.PNG);
background-repeat: no-repeat;
background-size: cover;
}
.titan {
background-image: url('../assets/titan.PNG');
width: 474px;
height: 96px;
display: flex;
justify-content:space-between;
align-items: center;
}
h1 {
color: #31ccf3;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
float: right;
}
h2 {
color: white;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
}
h3 {
color: #c9c9c9;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
font-size: 1em;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<div class="titan">
<div>
<h2>Titan</h2>
<h3>Exo Male</h3>
</div>
<h1>100</h1>
</div>
<script src="../js/index.js" async defer></script>
</body>
</html>
Try
.titan {
position: relative
}
.titan h1 {
position: absolute;
top: 0px;
left: 0px
}
If i understand correctly the solution is very simple; for h1 element
position: fixed;
top: 0;
right:0;
This question already has an answer here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Closed 1 year ago.
hello i'm trying to make a nav bar using the position:sticky property but for some reason its not sticking i've searched the web for answers but couldnt find any fix so here I am
/*variables*/
:root {
--black: black;
--white: #FFFFFC;
--pink-white: #FEF7FF;
--p-pink: #FFC6FF;
--p-purple: #BDB2FF;
--p-dark-blue: #A0C4FF;
--p-light-blue: #9BF6FF;
--p-green: #CAFFBF;
--p-yellow: #FDFFB6;
--p-orange: #FFD6A5;
--p-red: #FFADAD;
--box-shadow-val: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
--font-val: 'Montserrat', sans-serif;
--radius-val: 0.75em;
--hover-white: #F2F2F0;
}
body {
margin: 5;
}
/*here*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--white);
position: -webkit-sticky;
position: sticky;
top: 0;
box-shadow: var(--box-shadow-val);
font-family: var(--font-val);
border-radius: var(--radius-val);
}
li {
float: left;
}
li a {
display: block;
color: var(--black);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: var(--hover-white);
}
/*img is not part of original code just there to show it dose not stick*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap" rel="stylesheet">
<title>Portfilo</title>
</head>
<body>
<div class="navBar">
<ul>
<li><b>What Is Port</b></li>
<li><b>Privacy</b></li>
<li><b>Get Started</b></li>
<li><b>Guides</b></li>
<li><b>Credits</b></li>
</ul>
</div>
<!-- img is not part of original code -->
<img src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</body>
</html>
I have litterally no idea why it would not be working it might be me using it in the wrong place or something.
I'm planning to make it more responsive but that for another day so please excuse the bad UI on smaller windows.
you added position: sticky; to the <ul>. However sticky does not move the element out of the flow. Means the element will leave the viewport once the parent element leaves the viewport.
As such you have to add the sticky not to the <ul> but the containing <div>
sticky is supported by all browsers with exeption of IE (that will be deprecated starting at the 16th August 2021 and does not support sticky even with vendor-prefix)
/* css changes */
.navBar {
position: sticky;
top: 0;
}
/* original css */
/*variables*/
:root {
--black: black;
--white: #FFFFFC;
--pink-white: #FEF7FF;
--p-pink: #FFC6FF;
--p-purple: #BDB2FF;
--p-dark-blue: #A0C4FF;
--p-light-blue: #9BF6FF;
--p-green: #CAFFBF;
--p-yellow: #FDFFB6;
--p-orange: #FFD6A5;
--p-red: #FFADAD;
--box-shadow-val: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
--font-val: 'Montserrat', sans-serif;
--radius-val: 0.75em;
--hover-white: #F2F2F0;
}
body {
margin: 5;
}
/*here*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--white);
box-shadow: var(--box-shadow-val);
font-family: var(--font-val);
border-radius: var(--radius-val);
}
li {
float: left;
}
li a {
display: block;
color: var(--black);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: var(--hover-white);
}
/*img is not part of original code just there to show it dose not stick*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap" rel="stylesheet">
<title>Portfilo</title>
</head>
<body>
<div class="navBar">
<ul>
<li><b>What Is Port</b></li>
<li><b>Privacy</b></li>
<li><b>Get Started</b></li>
<li><b>Guides</b></li>
<li><b>Credits</b></li>
</ul>
</div>
<!-- img is not part of original code -->
<img src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</body>
</html>
I have a button with some styling but when i load the page, the transition on that button fires. So you see an ugly load from no padding to a button with padding.
This is how i load the css:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $pageTitle; ?></title>
<meta name="description" content="<?php echo $metaDescription; ?>">
<link rel="canonical" href="<?php echo $canonical; ?>" >
<link rel="stylesheet" type="text/css" href="public/css/style.css">
<link rel="stylesheet" href="public/fontawesome5/all.min.css">
<!-- Bootstrap CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
The button html:
Contact us
The button scss:
.button {
position: relative;
text-decoration: none;
&.primary {
background-color: $black-color;
color: $white-color;
padding: 20px 40px;
font-weight: 300;
border-radius: $border-radius;
transition-duration: $transition-duration;
&::after {
#include pseudoElement($content: "\f054", $top: 50%, $right: 16px, $height: auto, $width: auto, $font-family: $font-awesome);
transform: translate(0, -42%);
opacity: 0;
}
&:hover {
padding: 20px 44px 20px 36px;
&::after {
right: 24px;
opacity: 1;
}
}
}
}
I am building a simple webpage. The text is displaying correctly but the icon is not displaying. The icon is from ionicons framework.
I checked ionicons.min.css path and icon name in this css file
My html file:
<!--DOCHtml5-->
<html lang="en">
<head>
<meta charset="utf-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>webpage</title>
<link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">
<link href="icons/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class = "name">
Name
<ul class = "social-icons">
<li><i class="ion-arrow-right-a"></i></li>
</ul>
</div>
</body>
</html>
My css file:
*{
margin:0;
padding:0;
font-family: 'Euphoria Script', cursive;
font-size: 100px;
}
body{
height:100vh;
margin: 0;
padding: 0;
background-color: #ef6758;
}
.name{
position:absolute;
top:35%;
left:31%;
font-family: 'Montez', cursive;
color: #4be214;
}
.social-icons li{
list-style: none;
}
Icon should be visible
Go through it. it will work for you, because there is font-family files not found in your css
*{
margin:0;
padding:0;
font-family: 'Euphoria Script', cursive;
font-size: 100px;
}
body{
height:100vh;
margin: 0;
padding: 0;
background-color: #ef6758;
}
.name{
position:absolute;
top:35%;
left:31%;
font-family: 'Montez', cursive;
color: #4be214;
}
.social-icons li{
list-style: none;
}
<!--DOCHtml5-->
<html lang="en">
<head>
<meta charset="utf-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>webpage</title>
<link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class = "name">
Name
<ul class = "social-icons">
<li><i class="ion-arrow-right-a"></i></li>
</ul>
</div>
</body>
</html>
I tried almost everything to get rid of the top margin I used the normalized.css reset, universal selector reset, HTML and body reset margin to 0.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>index</title>
<link href='https://fonts.googleapis.com/css?family=Orbitron|Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="content-area">
<div class="text-logo">
<h1>Peacon<span>TT</span></h1>
</div>
</div>
</header>
</body>
</html>
CSS:
html {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 70px;
background-color: #586f7c;
}
.content-area {
width: 1000px;
margin: 0 auto;
}
.text-logo {
font-family: "orbitron", Arial, Helvetica, sans-serif;
font-weight: 100;
color: #ffffff;
}
You can set the margin property of your h1 element to 0 to accomplish your goal:
h1 {
margin: 0;
}