I am new working with HTML/CSS/JS and SvelteKit, so I'm struggling getting the look how I want it.
HTML
<h1>{market}</h1>
{#each articleList as item}
<form action="" method="post">
<p class="{item.checked ? "item-checked" : ""}">
{item.quantity} {item.article} {item.place}
</p>
{#if item.checked}
<button>DELETE</button>
{/if}
</form>
{/each}
Global CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background: #3A3A3A;
font-family: 'Montserrat', sans-serif;
margin: 0 2em;
}
Component CSS
form {
border: 1px solid #57FF90;
border-radius: 4px;
margin-bottom: 1em;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50px;
}
form p {
color: #FFFFFF;
font-size: 1.4rem;
padding: 0 0.5em
}
.item-checked {
text-decoration: line-through;
}
button {
height: 50px;
border: none;
background-color: #57FF90;
margin: 0;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
As you can see on the screenshot, there is a gap on the right side.
I created a test HTML file:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="wrapper">
<form action="POST">
<p>Random Text</p>
<button>DELETE</button>
</form>
<form action="POST">
<p>Random Text</p>
<!-- <button>DELETE</button> -->
</form>
</div>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding: 1em;
}
form {
background-color: red;
margin-bottom: 1em;
display: flex;
justify-content: space-between;
border-radius: 4px;
}
button {
border: none;
background-color: green;
cursor: pointer;
border-radius: 0 4px 4px 0;
}
</style>
</body>
</html>
Here everything is looking like expected. Why is there a difference?
Your html test file isn't using the same CSS. When I edit the styles in the test file to be the same as those you're using in the svelte code, I get a page that looks identical.
Also, I don't see the gap except at 175% zoom. That's kind of odd, so I suspect that it's a rounding issue. At any rate, it appears in the html test file as well as the served svelte file, so this isn't a Svelte or SvelteKit issue, as near as I can tell.
Related
Hello everybody & anybody who stumbles upon this!
I have ran into an issue where only on mobile devices there appears to be a feint border around my input tags elements. This happens in safari & google chrome on mobile. This does not happen in live server locally. It looks like its trying to create a border-radius: 20px around my input elements but in the css styling for desktop I don't even have that styling applied.
I have tried directly reapplying the desired styling in the mobile media query but everything I have tried has not worked so far.
Thank you in advance!! (p.s really sorry for the way the snippet is compiled, this was written using sass/scss.)
html, body {
font-family: 'mitr', sans-serif;
}
#contact {
background-color: rgba(66, 76, 96, 0.8);
padding: 2rem;
}
#contact .container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#contact .container .contact-title h1 {
color: #a3bfd9;
font-size: 4rem;
font-weight: 600;
text-align: center;
}
#contact .container .contact-title p {
color: #fff;
font-size: 1.5rem;
font-weight: 300;
}
#contact .container .contact-title p a {
color: #a3bfd9;
text-decoration: underline;
}
#contact .container .form form {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#contact .container .form form input {
border: none;
border-bottom: 3px #fff solid;
background: transparent;
color: #fff;
margin: 3rem 0;
padding: 0.5rem 0;
width: 600px;
font-size: 1.2rem;
font-weight: 500;
}
#contact .container .form form input::placeholder {
color: #fff;
}
#contact .container .form form input:focus {
outline: none;
}
#contact .container .form form button {
color: #fff;
background-color: #2675a6;
border: none;
border-radius: 50px;
padding: 1.5rem;
width: 250px;
font-size: 1.3rem;
}
#contact .container .form form button i {
position: relative;
margin-right: 0.5rem;
}
#contact .container .form form button:hover {
background-color: #a3bfd9;
color: #283040;
}
<section id="contact">
<div class="container">
<div class="contact-title">
<h1>Lets Chat</h1>
<p>Alternatively, you can reach out to me via Linkedin</p>
</div>
<div class="form">
<form action="https://formsubmit.co/your#email.com" method="POST">
<input type="text" name="name" required placeholder="name">
<input type="email" name="email" required placeholder="email">
<input type="text" name="message" required placeholder="message">
<button type="submit"><i class="fas fa-paper-plane"></i>Send</button>
</form>
</div>
</div>
</section>
i fixed it.. really happy I figured it out on my own!! little stuff like this, although trivial make me doubt my skills (i've only been working with html & css for 3 months). super simple, and disappointed that i actual wrote this question up but i won't delete it. i'll leave it up to remind myself to experiment just a little bit more before i ask for help.
changing border-radius: none to border-radius: 0; within my media query fixed it.
.form {
form {
input {
width: 300px;
font-size: 17px;
border-bottom: 3px solid #fff;
border-radius: 0;
}
button {
padding: 1rem;
font-size: 16px;
}
}
}
<!DOCTYPE html>
<html>
<title>Simple Sign up from</title>
<head>
<style>
html, body {
display: flex;
justify-content: center;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
}
form {
border: 5px solid #f1f1f1;
}
input[type=text] {
width: 100%;
padding: 16px 8px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
select {
width: 100%;
padding: 16px 8px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4286f4;
color: white;
padding: 14px 0;
margin: 10px 0;
border: none;
cursor: grab;
width: 48%;
}
h1 {
text-align:center;
fone-size:18;
}
button:hover {
opacity: 0.8;
}
.formcontainer {
text-align: center;
margin: 24px 50px 12px;
}
.container {
padding: 20px 0;
text-align:left;
}
span.psw {
float: right;
padding-top: 0;
padding-right: 15px;
}
/* Change styles for span on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
</style>
</head>
<body>
<form method="post">
<h1>DSL_PROJECT</h1>
<div class="formcontainer">
<div class="container">
<label for="Rname"><strong>Requestor-name</strong></label>
<input type="text" placeholder="Enter Requestor-name" name="Rname" required>
<label for="Nname"><strong>Namespace-name</strong></label>
<input type="text" placeholder="Enter Namespace-name" name="Nname" required>
<label for="Pname"><strong>Project_ID</strong></label>
<select id="select">
<option value="default">default</option>
</select>
</div>
<button type="submit"><strong>SUBMIT</strong></button>
</div>
</form>
<script>
var select=document.getElementById("select"),
arr=["p1","p2","p3"];
for(var i=0;i<arr.length;i++)
{
var option=document.createElement("OPTION"),
txt=document.createTextNode(arr[i]);
option.appendChild(txt);
option.setAttribute("value",arr[i]);
select.insertBefore(option,select.lastChild);
}
</script>
</body>
</html>
<?php
if(isset($_POST['textdata']))
{
$data=$_POST['textdata'];
$fp = fopen('data.txt', 'a');
fwrite($fp, $data);
fclose($fp);
}
?>
From the above HTML code there are few user inputs so I have added Post method & PHP code to trigger or push input user data of html to text(.txt)file but data is not written to the text file[ I have created manually data.txt file in my local]. And in the same script added java script to add or create list.Someone help me to fix the issue. Thanks in advance.
I want my website to be responsive and adjust to any device. I'm using glitch.com to create this website. For example on mac os, when I set my website to full screen there is a scrolling bar even thought I don't want there to be one. How can I achieve a responsive website? I've tried scaling my website down when on different devices but it wont work. Also, I provided some images and code below (including my website).
Website:
https://runturtle.glitch.me/
Code:
#import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");
#fname {
margin-bottom: 10px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
* {
font-family: "Rubik";
user-select: none;
}
form {
margin: auto;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #a0a0a0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
h1 {
align-items: center;
}
h3 {
color: #dde6d8;
}
input {
margin: 0 auto;
border: none;
color: black;
background-color: rgb(white);
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.dashboard {
width: 150px;
height: 800px;
position: absolute;
left: 10px;
top: 81px;
}
.home {
opacity: 1;
width: 150px;
}
article {
background: #131b0b;
width: 50%;
margin: 20px auto;
border-radius: 10px;
padding: 10px;
}
hr,
article .date {
color: #a0a0a0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Run Turtle</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img
src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px"
/>
<h1><strong>Run Turtle</strong></h1>
</header>
<main>
<article class="dashboard">
<h1>Dashboard</h1>
<hr />
<button
onClick="window.location.href='https://runturtle.glitch.me';"
class="home"
>
Home
</button>
<br />
<br />
<button
onClick="window.location.href='register.html';"
class="register"
>
Register
</button>
</article>
<article>
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</article>
</main>
<script src="index.js"></script>
</body>
</html>
Here's an image of when the browser is resized:
You can use the Bootstrap Grid System for a responsive website. The layout is in the form of rows and columns that can be adjusted depending on the device size.
Here's the documentation link.
Personally, I like AMP (Accelerated Mobile Pages.) I myself use it for my site and it works good with page layouts.
AMP has a page on how to set up your HTML document to make a responsive mobile page. Here is the article
I suggest you to follow #media rule. CSS Grid Layout Module will help you to solve the arisen problem. For an example I have put a solution code.
screenshot_1 screenshot_2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.menu {
float: left;
width: 25%;
text-align: center;
}
.menu article {
background-color: #1f2215;
padding: 8px;
height: 800px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
input {
margin: 0 auto;
border: none;
color: black;
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
#media only screen and (max-width: 620px) {
.menu,
.main {
width: 100%;
}
.menu {
height: 200px;
}
.main {
background: #1f2f15;
height: 600px;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div>
<header>
<img src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px" />
<h1><strong>Run Turtle</strong></h1>
</header>
</div>
<div>
<div class="menu">
<article>
<h1>Dashboard</h1>
<hr />
<button>
Home
</button>
<br />
<br />
<button>
Register
</button>
</article>
</div>
<div class="main">
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</div>
</div>
I am creating a footer in HTML/CSS and I am trying to create an email form at the bottom of the footer. I have already created the button and form itself; however, the wording on the button does not appear.
Here is my HTML code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.footer-container {
background-color: #212329;
padding-bottom: 20px;
width: 80%;
height: 40vh;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
}
.footer-container h4 {
color: #fff;
text-align: left;
text-shadow: 0.5px 0.5px gray;
}
.footer-container h6 {
color: #fff;
text-shadow: 0.5px 0.5px gray;
}
.footer-heading {
display: flex;
flex-direction: column;
margin-right: 4rem;
}
.footer-heading h6 {
color: #fff;
margin-bottom: 2rem;
}
.footer-heading a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer-heading a:hover {
color: darkgoldenrod;
transition: 0.5s ease-in-out;
}
.email-form h4 {
margin-bottom: 2rem;
}
#footer-email {
width: 250px;
height: 40px;
border-radius: 4px;
outline: none;
border: none;
padding-left: 0.5rem;
font-size: 1rem;
margin-bottom: 1rem;
}
#footer-email::placeholder {
color: #b1b1b1;
}
#footer-email-btn {
width: 100px;
height: 40px;
border-radius: 4px;
background-color: darkred;
outline: none;
border: none;
color: #fff;
font-size: 1rem;
}
#footer-email-btn:hover {
cursor: pointer;
background-color: darkgoldenrod;
transition: all 0.4s ease-in-out;
}
<section class="footer-container">
<h4>Golden Lion Insurance Services</h4>
<div class="footer-heading">
<h6>About Golden Lion</h6>
About Rose
Rose Income Tax Services
</div>
<div class="footer-heading">
<h6>Services</h6>
Auto
Home
Truck
Health
Commercial
Life
Bonds
Annuities
</div>
<div class="footer-heading">
<h6>Resources</h6>
Blog
</div>
<div class="footer-heading">
<h6>Contact Us</h6>
</div>
<div class="footer-heading"></div>
<div class="email-form">
<h4>Get Your Latest Insurance Tips from Us!</h4>
<input type="email" placeholder="Enter your email here" id="footer-email">
<button type="submit" value="Sign Up!" id="footer-email-btn"></button>
</div>
</section>
Perhaps I may have missed some coding on the CSS, but the wording "sign up!" doesn't appear when I launch the code on my browser (I am using the current version of Google Chrome). Any help or pointers?
Thanks again!
The Problem seems to be in your HTML file on the 3rd line from the bottom.
When you declare a button, you need to mention some innerText in it.
For Example: <button> innerText </button>
Similarly for your code:
<button type="submit" value="Sign Up!" id="footer-email-btn">Sign Up!</button>
No worries, you only need to add some text inside the bottom tag.
Update your HTML button tag as the following
<button type="submit" value="Sign Up!" id="footer-email-btn">Submit</button>
I am trying to create a simple html banner ad and make it responsive for desktop and mobile.
My current version works for desktop but I am pretty sure that using a lot of absolute position is not the best to approach this.
I have been looking at Flexbox or CSS Grid and thought that might be a route to go. I have also thought about using simple Bootstrap columns. Any advice on the most efficient way to accomplish this?
I feel like i have a good bit of CSS set that I dont really need. Looking to make this as simple as possible.
<div class='ad-banner-container'>
<div class='full-size-banner'>
<div class='image-container'>
<img class='banner-image' src="https://via.placeholder.com/150" alt="Img Alt Text">
</div>
<div class='text-column'>
<p class='ad-title'>Ad Title</p>
<p class='ad-body-text'>This is where the detail text goes</p>
</div>
<button class='cta-btn' data-target="#myModal">Call to Action</button>
</div>
Link to Codepen with current version - HTML and CSS
I used Sass and custom tags, sorry. But I had fun with this.
Codepen: https://codepen.io/bstees/pen/KKwVVqw
HTML
<banner-container>
<banner-ad>
<image-container>
<img class='banner-image' src="https://via.placeholder.com/150" alt="Img Alt Text">
</image-container>
<text-column>
<p class='ad-title'>Ad Title</p>
<p class='ad-body-text'>This is where the detail text goes</p>
</text-column>
<button data-target="#myModal">Call to Action</button>
</banner-ad>
</banner-container>
SASS
banner-container {
height: 160px;
padding: 36px;
background-color: #F2F7F7;
font-family: "Open Sans", sans-serif;
* { box-sizing: border-box; }
}
banner-ad {
display: flex;
align-items: center;
background-color: #fff;
max-width: 1082px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
flex-wrap: wrap;
image-container {
flex: 0;
width: 150px;
height: 150px;
padding-right: 36px;
img {
width: 150px;
height: 150px;
}
}
text-column {
display: block;
flex: 1;
padding: 1em;
min-width: 600px;
.ad-title {
font-size: 18px;
color: black;
margin: 5px 5px 15px 5px;
}
.ad-body-text {
margin: 5px 5px 10px 5px;
font-weight: 300;
font-size: 16px;
}
}
button {
border: 2px solid #007DBA;
background-color: #ffffff;
font-weight: 700;
font-size: 18px;
color: #007DBA;
margin: 1em;
padding: 1em 2em;
flex: 1 0;
}
button:hover {
background-color: #007DBA;
border-color: #007DBA;
color: #ffffff;
}
}