Like the question says, Is there any way to avoid the overflow x?
Many Thanks in advance
https://github.com/1GCONF/simple_social_media.git
enter image description here
#edit: found the answer:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/style.css">
<script src="main.js" async defer></script>
</head>
<body>
<section class="section">
<nav>
<div class="port_item">Nav</div>
</nav>
<div class="port">
<div class="port_item">Profile</div>
<div class="port_item">Berichten</div>
<div class="port_item">Component X</div>
<div class="port_item">Component X</div>
<div class="port_item">Component X</div>
</div>
</section>
</body>
<style>
#import url("https://fonts.googleapis.com/css2?family=Kameron:wght#400;700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
outline: 0;
text-shadow: 0 4px 4px rgba(25, 25, 25, 0.25);
font-family: 'Kameron', serif;
font-weight: 200;
}
body .section {
display: grid;
grid-template-columns: 2fr 7fr;
justify-content: center;
align-items: center;
outline: 2px solid red;
width: 75%;
margin: 5ex auto;
}
body .section nav {
outline: 2px solid red;
}
body .section .port {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
body .section .port .port_item {
outline: 2px solid red;
height: 250px;
}
</style>
</html>
Is responsive and Looks like this:
responsive grid without queries
Related
I have a node server that is sending emails templates.
When I'm opening that template locally it runs the CSS styles as properly at is should.
When I'm sending this as an a email to myself for testing some CSS doesn't apply.
CSS being received from a test email:
mainCon {
width: 936px;
background-color: #e9e9e9;
display: flex;
font-size: 24px;
border-radius: 0px 0px 20px 20px;
}
Original full CSS:
mainCon {
width: 936px;
height: max-content;
background-color: #E9E9E9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24px;
border-radius: 0px 0px 20px 20px;
}
Server (nodemailer):
const mailOptions = {
from: "email#yahoo.com",
to: "email#yahoo.com",
subject: `sub`,
template:'index',
context: {
fullName: req.body.fullName,
reason: req.body.reason,
problem: req.body.problem,
}
}
The CSS is inside the handlebars style component attached to the head
handlebars html code
<!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.0">
<title>Document</title>
</head>
<body>
<div class="mainCon">
<p class="title">title</p>
<div class="nameNreasonCon">
<div class="reasonCon">
<p>{{reason}}</p>
</div>
<div class="nameCon">
<p>{{fullName}}</p>
</div>
</div>
<div class="problemCon">
<p>{{problem}}</p>
</div>
</div>
</body>
</html>
I'm using a template for a weekly newsletter and I'm trying to keep all the images that get piped in to the newsletter to be the same size. Here's the current code:
<img src="xxx {{ content.thumbnail_uri }}" width="340"
style="margin: 0;
color: #222222;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: 19px;
padding: 0;
text-align: left;
font-size: 14px;
margin-bottom: 0;
width: 100%;
height: auto;
max-width: 340px;" />
The problem is that when the template gets generated there is an introduction that pushes down the left column and the image height on that size gets squished down. Is there a way that I can guarantee that the images stay the same height and width while still keeping it responsive for mobile?
I'd do something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
.image-holder {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}
.image-holder img {
width: 100%;
}
</style>
<body>
<div class="image-holder">
<img src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg" alt="image1"/>
<img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg" alt="image2"/>
<img src="https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg" alt="image2"/>
</div>
</body>
</html>
I am trying to position a div in the center of a grid header but many of my attempts have failed.
Here's link to code pen: https://codepen.io/ZeePintor/pen/OKxLRe
Here's the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ermesinde Clube de Karaté</title>
<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/css?family=Montserrat:900|Work+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="brand">
<img src="/images/eck_logo.png">
<div class="page-headers">
<h1>ECK</h1>
<h3>ERMESINDE CLUBE KARATE</h3>
</div>
</div>
</div>
<div class="section1">Section1</div>
<div class="section2">Section2</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
And here is the css:
.wrapper{
display:grid;
width:100%;
background-color:#e3e3e3;
grid-template-rows:
[grid-start hd-start] 100vh
[hd-end sc1-start] 100vh
[sc1-end sc2-start] 100vh
[sc2-end ft-start] 125px
[ft-end grid-end];
grid-template-columns: 100%;
}
div div:hover{
border:1px solid black;
}
/*
HEADER
*/
.header{
grid-row:hd;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/black_belt_stock_photo.jpg);
}
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
}
.brand img{
border: 2px rgb(109, 12, 12) solid;
border-radius: 50%;
}
.brand h1{
color:white;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
}
.brand h3{
color:white;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.section1{
grid-row:sc1;
}
.section2{
grid-row:sc2;
}
.footer{
grid-row:ft;
}
This is supposed to be the big header of the page to when people open the page, animations might be added to the headers and image, but first I would like to center vertically while aligning the element to the far right.
I have tried to move around in the css with somethings like:
- position:absolute;
- vertically-align:center;
- justify-content:right; align-content:center;
But none of these worked for me, so please could someone help me?
Thank you.
This might work for you:
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
position: absolute;
right: 2rem;
top: 50%;
margin-top: -160px; /* 1/2 image height */
}
I can't seem to be able to control the height of my rows efficiently. I've set 1fr for 6 columns which has remedied the problem of the rows resizing when the height of the page increases. But now the footer height increases along with the page height. This happens in small screen sizes. Around 400px in width. How can I fix this? Thanks.
/* The CDN */
/* #import url('https://fonts.googleapis.com/css?family=Exo'); */
html, body {
width: 100%;
height:100%;
}
#font-face {
font-family:Exo;
src:url(exo/Exo-Regular.ttf);
}
* {
box-sizing: border-box;
font-family:Exo;
}
.header {grid-area: header;}
.main {grid-area: main;}
.footer {grid-area: footer;}
body {
display: grid;
grid-template-areas:
'header header header header header header'
'main main main main main main'
'footer footer footer footer footer footer';
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
margin: 0;
text-align: center;
grid-gap: 10px;
}
a {
text-decoration: none;
color: black;
}
/* header */
header {
grid-column: 1 / span 6;
grid-row: 1;
padding: 14px 16px;
align-content: center;
border-bottom: 1px solid black;
}
h1 {
font-size: 17px;
font-weight: normal;
margin: 0;
}
/***********************************/
main {
display: grid;
grid-column: 1 / span 6;
grid-row: 2;
width: 100%;
height: 100%;
}
.searchbar {
grid-column: 1 / span 6;
grid-row: 1;
padding: 10px;
}
.searchinput {
border: 1px solid black;
}
input.icon[type="search"] {
width:100%;
height:20px;
box-sizing:border-box;
border:2px solid #ccc;
border: radius 4px;
font-size:16px;
background-color:white;
background-image:url('/libs/fontawesome-free-5.4.1-web/svgs/solid/search.svg');
background-size:15px 15px;
background-position:10px center;
background-repeat:no-repeat;
padding:12px 20px 12px 40px;
}
.thestuff {
grid-column: 2 / span 4;
grid-row: 2;
width: 100%;
border: 1px solid black;
padding: 2px 16px;
}
.thestuff img {
width: 100%;
max-width: 100%;
}
/* footer */
footer {
display:grid;
grid-column: 1 / span 6;
grid-row: 3;
align-content: center;
height:60px;
border-top: 1px solid black;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Guzo Lemine</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Get the cdn of all the necessary non-local files after completion -->
<!-- Font Awesome CDN -->
<!--
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
-->
<!-- Bootstrap CDN -->
<!--
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-->
<!-- Libraries -->
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="libs/fontawesome-free-5.4.1-web/css/all.css" />
</head>
<body>
<header class="header">
<h1>Guzo Lemine</h1>
</header>
<main class="main">
<section class="searchbar">
<form method="GET" action="">
<input class="searchinput icon" type="search" name="search" placeholder="What are you looking for?">
</form>
</section>
<section class="thestuff">
<img src="img/s-l500.jpg" alt="F-150 Raptor">
</section>
</main>
<footer class="footer">
<p>© 2018 Guzo Lemine. All Rights Reserved.</p>
</footer>
</body>
</html>
I have issue with background for element article. I use :nth-child(n), but they do not work correctly at my localhost. When I same code place to jsfiddle all is ok.
Code at my local is following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:: Nove pokusy s Yablkem ::</title>
<link rel="stylesheet" href="/ath/css/normalize.css">
<link rel="stylesheet" href="/css/yablko.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<article>Jsem ve středě?</article>
<article>Všichni co se moc ptají se nic nedozví...</article>
<article>Marmelada</article>
<article>Sýrové kuličky || Menu</article>
</body>
</html>
CSS (yablko.css)
html, body {
height: 100%;
}
body {
padding: 1em;
margin: 0;
background: orange;
font-size: 20px;
display: flex;
align-items: center;
justify-content: baseline;
justify-content: center;
flex-direction: row;
}
article {
padding: 1.2em;
background: #336dd1;
border-radius: .8em;
margin: 5px;
}
article:nth-child(1) { background: #888; }
article:nth-child(2) { background: #ccd; }
article:nth-child(3) { background: #333; font-size: 10px; }
article:nth-child(4) { background: #aaa; font-size: 30px; }
Image from local (bad result):
Image from jsfiddle (ok result):
Can I ask for help? Thanks