I have a contact form that I'm making for my WordPress website. When I test it on a standard webpage it looks like this:
But when I paste the code into WordPress it looks like this and does a paragraph.
Any help on this?
I am also using elementor if that helps.
here is the code:
.mailSec1 {
padding: 0px;
border-radius: 50px;
width: 350px;
border: #04aa6d 2px solid;
padding-left: 37px;
padding-top: 4px;
padding-bottom: 4px;
}
.mailSec1 input {
font-size: 18px;
width: 215px;
outline: none;
border: none;
}
.mailSec1 button {
height: 50px;
width: 85px;
background-color: #04aa6d;
color: #fff;
border-radius: 40px;
outline: none;
font-size: 22px;
border: none;
}
<div class="mailSec">
<div class="mailSec1">
<input type="email" name="email" placeholder="Tell us!">
<button>Send</button>
</div>
</div>
SOLUTION
Use flexbox to control the flow of elements in the mailSec1 element.
.mailSec1 {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding-right: 4px;
}
Related
I'm working my way though a beginners HTML and CSS tutorial and I'm unable to get my "T Shirt Size" selector to be on the same line with the selection.
I really would like someone to help me with this. I need to be able to get the tshirt size selector on the same line as my the dropdown list when in full-screen so that it looks good!
Here is the outcome that I'm looking for:
Here is the outcome I'm getting:
Here is my CSS Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #5D6063;
background-color: #EAEDF0;
font-family: "Helvecta", "Arial", sans-serif;
font-size: 16px;
line-height: 1.3;
display: flex;
flex-direction: column;
align-items: center;
}
.speaker-form-header {
text-align: center;
background-color: #F6F7F8;
border: 1px solid #D6D9DC;
border-radius: 3px;
width: 80%;
margin: 40px 0;
padding: 50px;
}
.speaker-form-header h1 {
font-size: 30px;
margin-bottom: 20px;
}
.speaker-form {
background-color: #F6F7F8;
border: 1px solid #D6D9DC;
border-radius: 3px;
width: 80%;
padding: 50px;
margin: 0 0 40px 0;
}
.form-row {
margin-bottom: 40px;
display: flex;
justify-content: flex-start;
flex-direction: column;
flex-wrap: wrap;
}
.form-row input[type='text'],
.form-row input[type='email']{
background-color: #FFFFFF;
border: 1px solid #D6D9DC;
border-radius: 3px;
width: 100%;
padding: 7px;
font-size: 14px;
}
.form-row label {
margin-bottom: 15px;
}
#media only screen and (min-width: 700px) {
.speaker-form-header,
.speaker-form {
width: 600px;
}
.form-row {
flex-direction: row;
align-items: flex-start; /* To avoid stretching */
margin-bottom: 20px;
}
.form-row input[type='text'],
.form-row input[type='email'],
.form-row select,
.form-row textarea {
width: 250px;
height: initial;
}
.form-row label {
text-align: right;
width: 120px;
margin-top: 7px;
padding-right: 20px;
}
.legacy-form-row {
margin-bottom: 10px;
}
.legacy-form-row legend {
width: 120px;
text-align: right;
padding-right: 20px;
}
.legacy-form-row legend {
float: left;
}
}
.form-row input[type='text']:invalid,
.form-row input[type='email']:invalid {
border: 1px solid #D55C5F;
color: #D55C5F;
box-shadow: none; /* Remove default red glow in Firefox */
}
.legacy-form-row {
border: none;
margin-bottom: 40px;
}
.legacy-form-row legend {
margin-bottom: 15px;
}
.legacy-form-row .radio-label {
display: block;
font-size: 14px;
padding: 0 20px 0 10px;
}
.legacy-form-row input[type='radio'] {
margin-top: 2px;
}
.legacy-form-row .radio-label,
.legacy-form-row input[type='radio'] {
float: left;
}
.form-row select {
width: 100%;
padding: 5px;
font-size: 14px;
float: right;
}
and html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<title>Speaker Submission</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<header class='speaker-form-header'>
<h1>Speaker Submission</h1>
<p><em>Want to speak at our fake conference? Fill out this form!</em></p>
</header>
<form action='' method='get' class='speaker-form'>
<div class='form-row'>
<label for='full-name'>Name</label>
<input id='full-name' name='full-name' type='text'/>
</div>
<div class='form-row'>
<label for='email'>Email</label>
<input id='email'
name='email'
type='email'
placeholder='joe#example.com'/>
</div>
<fieldset class='legacy-form-row'>
<legend>Type of Talk</legend>
<input id='talk-type-1'
name='talk-type'
type='radio'
value='main-stage' />
<label for='talk-type1' class='radio-label'>Main Stage</label>
<input id='talk-type-2'
name='talk-type'
type='radio'
value='workshop'
checked />
<label for='talk-type-2' class='radio-label'>Workshop</label>
</fieldset>
<div class='form-row'>
<label for='t-shirt'>T-Shirt Size</label>
<select id='t-shirt' name='t-shirt'>
<option value='xs'>Extra Small</option>
<option value='s'>Small</option>
<option value='m'>Medium</option>
<option value='l'>Large</option>
</select>
</div>
</form>
</body>
</html>
Your .form-row select style has width: 100%; which makes the select element fill the entire width of the parent div. So you just need to remove that line:
.form-row select {
/* remove the following line */
/* width: 100%; */
padding: 5px;
font-size: 14px;
float: right;
}
JS Fiddle: https://jsfiddle.net/cr2oj1zt/1/
It is because you set width value equal 100%. It will take the space of your div container. If you don't want it to equal the div width, you must specify value for select element. For example:
.form-row select {
width: 30%; /* or other value you want apply for the select element */
padding: 5px;
font-size: 14px;
float: right;
}
I'm trying to create a simple bordered form that has a button and input of type="text" inside of it.
There is this spacing that appears that I cannot remove.
main {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
main form {
display: flex;
border: 2px solid green;
}
main form .btndep {
display: block;
padding: 10px;
background: green;
border: 0;
box-shadow: none;
outline: none;
}
main form input {
border: 0;
outline: none;
box-shadow: none;
text-align: right;
padding-left: 5px;
padding-right: 5px;
}
<main>
<form class="deposit">
<button class="btndep">Deposit</button>
<input type="text" placeholder="0.00€">
</form>
</main>
there is a way around it; it seems... outline instead of border
I'm working with Reactjs in a page... like a diary.
At the end of the page, there is an img that I'm trying to set inside the page but because of the size, it goes out of the page... I try to modify it with Css, but still not working. Can you help me please?
This is how the page looks:
This is how the html code looks:
<div className="notes__content">
<input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
<textarea placeholder="What happened today?" className="notes__textarea"></textarea>
<div className="notes__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
</div>
</div>
This is how I set the css:
.notes__main-content{
display: flex;
flex-direction: column;
height: 100%;
}
.notes__appbar{
align-items: center;
background-color: $primary;
color: white;
display: flex;
justify-content: space-between;
padding: 10px 20px 10px 20px;
}
.notes__content{
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
}
.notes__title-input, .notes__textarea{
border: none;
&:focus{
outline: none;
}
}
.notes__title-input{
color: $dark-grey;
font-size: 25px;
font-weight: 700;
margin-bottom: 10px;
}
.notes__textarea{
border: none;
color: $dark-grey;
font-size: 20px;
flex: 1 1 auto;
resize: none;
}
.notes__image{
box-shadow: 5px 5px $dark-grey;
height: 150px;
}
To be clear, what I want to do is to set the img to 150px so it can fit my page. Thank you for your help
You can add another div inside notes__image div. Lets call it notes__image__inner with a div wrapper.
<div className="notes__content">
<input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
<textarea placeholder="What happened today?" className="notes__textarea"></textarea>
<div className="notes__image">
<div className="notes__inner__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
</div>
</div>
</div>
Update the notes__image and img CSS with this:
.notes__image {
box-shadow: 5px 5px $dark-grey;
height: 150px;
position: relative;
}
.notes__inner__image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.notes__inner__image img {
width: 100%;
position: static;
height: 100%;
object-fit: cover;
}
Images don't magically shrink to fit their containers. You need to tell them to do so:
.notes__image img {
max-width: 100%; /* <-- here's your huckleberry */
}
You don't want to use the width property as that'll stretch images beyond their native size, and you don't want to set height as that will goof up aspect ratio.
Here I've converted className to class for demonstration purposes. If you view the fullscreen demo and shrink the window size you can see it in action.
.notes__main-content {
display: flex;
flex-direction: column;
height: 100%;
}
.notes__appbar {
align-items: center;
background-color: $primary;
color: white;
display: flex;
justify-content: space-between;
padding: 10px 20px 10px 20px;
}
.notes__content {
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
}
.notes__title-input,
.notes__textarea {
border: none;
&:focus {
outline: none;
}
}
.notes__title-input {
color: $dark-grey;
font-size: 25px;
font-weight: 700;
margin-bottom: 10px;
}
.notes__textarea {
border: none;
color: $dark-grey;
font-size: 20px;
flex: 1 1 auto;
resize: none;
}
.notes__image {
box-shadow: 5px 5px $dark-grey;
height: 150px;
}
.notes__image img {
max-width: 100%; /* <-- here's your huckleberry */
}
<div class="notes__content">
<input type="text" placeholder="Somer awesome title" class="notes__title-input" autoComplete="off" />
<textarea placeholder="What happened today?" class="notes__textarea"></textarea>
<div class="notes__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen" />
</div>
</div>
The className property is used in React. Is this a React application? If not, it needs to be revised to "class".
Also make sure your image does not overflow the bounds of the div. You can set strict width and height in the image by using the img tag's "width" and "height" properties. Or create a notes__image img declaration, like this:
.notes__image img {
width: 100%;
height: 100%;
}
We are trying to create a chatbot application. The input where user enters the text and 'send' button are inside a div. The div width is 100%. This is working good in the laptop and on all the mobiles except Iphone14 where the send button is getting cutoff. Below is the code.
.chat-container {
background: #fff;
height: 100%;
overflow: hidden;
padding: 0;
border-right: 1px solid #d8dada;
border-left: 1px solid #d8dada;
}
.chat-container>div:last-of-type {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
padding-right: 10px;
}
body>div>div>div:nth-child(2)>span {
background: #dadada;
padding: 10px;
font-size: 21px;
border-radius: 50%;
}
body>div>div>div.message-data-right.macro {
margin: auto;
margin-left: 1%;
}
.chat-header {
background-color: #ffffff;
height: 3.5rem;
line-height: 3.5rem;
color: #000000;
border-bottom: 1px solid #000000;
position: relative;
}
.chat-header-content {
align-content: center;
padding-top: 10px;
padding-bottom: 10px;
}
.header-img {
height: 24px;
width: 106px;
transform: scale(0.85);
vertical-align: middle;
content: url('./../images/vz_logo.svg');
}
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
}
.chat-ul {
width: 100%;
list-style-type: none;
padding: 18px 18px 3px 18px;
position: absolute;
bottom: 62px;
display: flex;
flex-direction: column;
top: 3.5rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #909296 #dee0e2;
background-color: #f6f6f6;
margin-bottom: 0%;
border-bottom: 1px solid #c1c1c1;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
width: 100%;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.text>p:first-of-type {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p:last-of-type {
width: 100%;
text-align: right;
margin-bottom: -2px;
margin-top: auto;
}
.text-right {
float: right;
font-family: Arial;
position: relative;
}
.send-message {
width: 100%;
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<header class="chat-header">
<img class="header-img" />
<button type="button" class="icon-close" onClick="closeChatWindow()"></button>
</header>
<ul class="chat-ul"></ul>
<div>
<div class="send-message">
<div class="text text-right">
<input class="entered-text" />
</div>
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
Our testing team raised a bug saying that send button gets cutoff on IPhone14. I am not sure how to reproduce the issue as I don't have Iphone14. I have Android phone on which code is working fine. On Pc also, I tested on different browsers all are working fine. I used toggle device toolbar under developer tools to check how it looks like for different devices and used responsive to change width and height. I am not able to reproduce the issue. Below is the image where it got reproduced on Iphone14.
At the end of the image 'Send' grey color button is cutoff. Can any one please let me know how to resolve the issue.
You don't need an iPhone to see this. It's apparent in Chrome for me. Use the emulator in the dev tools if you like.
Remove the float (.text-right) from the layout
Take the 100% width off the input and .send-message
Move the flex class up a level to contain both the input and the button
I've also added some left margin to the button.
I've fixed a great many such situations in my career, and more often than not the solution involves removing unnecessary styling to simplify. You might work though your entire layout and do so.
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
margin-left: 10px;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.send-message {
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<div class="send-message">
<div class="text">
<input class="entered-text" />
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
The most straightforward way to solve this is to is use the CSS calc() function to give input.entered-text a flexible width which will always accommodate the width of the <button>:
e.g. If you give button#send a fixed width (width: 100px), then you can give input.entered-text a width that can accommodate that fixed width (width: calc(100% - 100px))
Example:
#send {
display: inline-block;
width: 100px;
margin-left: 12px;
box-sizing: border-box;
}
.entered-text {
display: inline-block;
width: calc(100% - 12px - 100px);
box-sizing: border-box;
}
Im no expert but should you put a <br> in the div
edit:
line breaks are usually unnecessary so I would say only use this temporary until you find the solution
My assignment is to make a login page, and the inputs and buttons have to have a 320px width, including a 2px border and 15px padding. I create two classes for the inputs and button, and in CSS I am specifying these widths for both but the button keeps coming out shorter. Right now it's coming out like this: 1
I'm fairly new at this so I apologize if my code is messy/this might seem like a silly question.
Here's my code:
HTML
<form class="signup" action="/signup/" method ="post">
<fieldset name="sign-up">
<legend>Sign up</legend>
<div class="input">
<label for="email">Email</label></br>
<input class="inputbar" placeholder="foo#bar.com" type="email" name="email" id="email" required/></br>
<label for="password">Password</label></br>
<input class="inputbar" placeholder="1234passw0rd" type="password" name="password" id"password" required/></br>
</div>
</fieldset>
<button type="signupbutton">Sign up</button>
</form>
CSS
.signup {
width: 320px;
padding: 40px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: white;
}
.signup fieldset{
border: none;
}
.input{
text-align: left;
}
.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 250px;
}
button{
background-color: mediumseagreen;
color: white;
}
Thanks everyone!
It's best to set the container width and then the elments inside to 100%. Using box-sizing: border-box; is key here.
* {
box-sizing: border-box;
}
.signup {
width: 320px;
padding: 40px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: white;
}
.signup fieldset{
border: none;
padding: 0;
margin: 0;
}
.input{
text-align: left;
}
.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 100%;
}
button{
background-color: mediumseagreen;
color: white;
}
.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 250px;
}
It appears you have set the width of the button to 250px. Try changing that to 320px.
Remove the text align on th input class
.input{
text-align: left;
}
and do this
.signup .input label {
text-align: left;
display: inline-block;
width: 100%;
padding-left: 20px;
}
Aside that the everything is working alright in chrome
what browser are you using to run your test?
this is whati have on my browser