I am trying to create a responsive strip in my Wordpress and I am rather struggling. I have provided two screenshots to help:
For Desktop, it's looking ok but I am having the following issues:
1: When I increase the padding of the button to make it same height as the input field, it shifts the input field, meaning they're never aligned and I don't know how to fix that?
2: Apply extra width to the input field, when I try to add width, the width increases from left to right, overlapping the button
3: When I attempt to move the container containing the input field and button more to the left (see class .lnviXl.lnviXl) in css, the input field shrinks. Not shown on screenshot
Device:
In devices it looks bad. Simply, I want the gif and text to be next each other and below is an input field and below that the button. Here is what it looks like on a shruken desktop screen to try and replicate a device. Also what's weird, I can't see this text field and button in my mobile device (only can see the image and text) but yer when I shrink browser screen on desktop to replicate device preview, I can see the input field and button. Really bizzare
Here is the current code:
/*newsletter section */
#custom_html-4 {
width: 100% !important;
padding-bottom: 70px;
}
.eVEmvD.eVEmvD.eVEmvD.eVEmvD.eVEmvD.eVEmvD {
border-radius: 0 !important;
}
.newsletter_section {
width: 100% !important;
background: #f2f2f2;
overflow: hidden;
padding-top: 25px;
padding-bottom: 25px;
display: flex;
align-items: center;
color: black;
}
.newsletter_text_section {
width: 50%;
float: left;
font-size: 24px;
padding-left: 30px;
margin-left: auto;
display: flex;
align-items: center;
}
.newsletter_text_section p {
font-size: 24px !important;
margin: 0;
color: black !important;
}
.newsletter_gif {
float: left;
margin-left: 20px;
}
.newsletter_input_section {
width: 50%;
display: flex;
justify-content: flex-end;
margin-right: 30px;
}
.klaviyo-form-Rrsqsh {
margin-left: auto;
}
.kvTDNe.kvTDNe {
width: 400px;
}
.lnviXl.lnviXl {
display: flex;
flex-direction: row;
-webkit-box-align: stretch;
align-items: stretch;
position: relative;
margin-right: 200px;
}
#media(max-width: 855px) {
.newsletter_section {
display: block;
}
.newsletter_input_section {
margin-left: 0 !important;
margin-right: auto !important;
clear: both;
width: 100% !important;
display: block !important;
}
.newsletter_text_section {
margin-left: auto;
margin-right: auto;
padding-left: 0px;
width: 100%;
}
.fGCWnQ.fGCWnQ {
padding: 0px !important;
}
.ctaEzx.ctaEzx {
max-width: none !important;
}
}
<aside id="custom_html-4" class="widget_text widget_number_8 column-1_5 widget widget_custom_html">
<div class="textwidget custom-html-widget">
<div class="newsletter_section">
<div class="newsletter_text_section">
<img src="..." class="newsletter_gif">
<p>Join Balance and get 20% off your first order</p>
</div>
<div class="newsletter_input_section">
<div class="klaviyo-form-Rrsqsh klaviyo-form form-version-cid-3">
<div>
<form class="needsclick View__FormView-sc-1ou3cq2-0 ctaEzx klaviyo-form-version-cid_3 kl-private-reset-css-Xuajs1" novalidate="" isembed="true" tabindex="-1">
<div class="needsclick Column__FormColumn-z5j99u-0 hVFNhP kl-private-reset-css-Xuajs1">
<div data-testid="form-row" class="needsclick Row__FormRow-sc-17nghml-0 lnviXl kl-private-reset-css-Xuajs1">
<div component="[object Object]" formcomponentstyling="[object Object]" data-testid="form-component" class="needsclick FormComponent__StyledFormComponentWrapper-e0xun6-0 CWZcV notranslate kl-private-reset-css-Xuajs1" formcomponenttheme="[object Object]">
<div class="needsclick TextInput__StyledInputContainer-sc-1o6de9f-1 kvTDNe kl-private-reset-css-Xuajs1">
<input type="email" name="email" tabindex="0" styling="[object Object]" placeholder="enter email" aria-label="enter email" aria-invalid="true" valid="0" options="[object Object]" class="notranslate needsclick TextInput__FormStyledTextInput-sc-1o6de9f-0 eFCYcA kl-private-reset-css-Xuajs1"
aria-describedby="klaviyo_ariaid_6">
</div>
</div>
<div component="[object Object]" fullwidth="true" formcomponentstyling="[object Object]" data-testid="form-component" class="needsclick FormComponent__StyledFormComponentWrapper-e0xun6-0 fGCWnQ notranslate kl-private-reset-css-Xuajs1" formcomponenttheme="[object Object]"><button type="button" tabindex="0" class="needsclick Button__FormStyledButton-p2mbjt-0 eVEmvD kl-private-reset-css-Xuajs1">JOIN NOW</button></div>
</div>
</div>
<input type="submit" tabindex="-1" class="notranslate needsclick View__HiddenSubmit-sc-1ou3cq2-1 StXTa kl-private-reset-css-Xuajs1" value="Submit">
</form>
</div>
</div>
</div>
</div>
</aside>
Related
I make it for web is good but i need to make it responsive for phones too.
.features-container, .authentication-container {
margin-left: auto;
margin-right: auto;
text-align: center !important;
justify-content: center !important;
}
.features-container {
max-width: 900px;
border: 1px solid rebeccapurple;
}
.authentication-container {
align-items: center !important;
display: flex !important;
color: rgba(255,255,255,0.65);
}
.authentication {
max-width: 314px;
border-style: none;
text-align: right !important;
}
.authentication-title {
0;
0;
color: white !important;
}
.authentication-title, .authentication-sub {
text-align: left !important;
}
#media (min-width: 768px) {
.item {
width: 33.3333333333%;
text-align: right !important;
padding: 32px !important;
flex: 1 1 auto !important;
}
}
<div class="container text-center features-container app-screenshot">
<div class="feature-items">
<div class="authentication-container">
<div class="item item-right">
<img class="authentication" src="https://desktop.github.com/images/upgrade/co-authoring.png" alt="Authentication">
</div>
<div class="item item-left">
<h4 class="authentication-title">Attribute commits with collaborators easily</h4>
<p class="authentication-sub">Quickly add co-authors to your commit. Great for pairing and excellent for sending a little love/credit to that special someone who helped fix that gnarly bug of yours. See the attribution on the history page, undo an accidental attribution, and see the co-authors on github.com</p>
</div>
</div>
</div>
</div>
i want to make like a Github.
Original template: https://desktop.github.com
My Error: https://imgur.com/a/oCbcd50
Using flex-wrap: wrap is WORKING
.authentication-container {
•••
flex-wrap: wrap;
}
How can I create icons with text below them in a row, with css?
I currently have this:
<div class="icon-stats">
<div class="video-stats-holder">
<span class="icon-video-stat"></span><span class="video-stat-descr">12</span>
</div>
<div class="playlist-stats-holder">
<span class="icon-playlist-stat"></span><span class="playlist-stat-descr" >5</span>
</div>
</div>
with my css:
.icon-stats {
max-width: 160px;
padding-top: 30px;
}
.video-stats-holder, .playlist-stats-holder {
display: flex;
align-items: center;
flex-direction: column;
}
.icon-video-stat, .icon-playlist-stat {
padding: 5px;
height: 64px;
width: 64px;
}
.icon-video-stat {
background: url('/css/icons/video-stats.png');
}
.icon-playlist-stat {
background: url('/css/icons/playlist-stats.png');
}
The code above is based on this answer, but that doesn't completely work for me, it seems.
The icon and text appear now in one column, all below each other.
I want the icons next to each other, (with the text centered below it).
You can give .icon-stats class a display property of flex display:flex
Just update your CSS with the following code
.icon-stats {
max-width: 160px;
padding-top: 30px;
display: flex;
}
I have two block elements that I would like to be on the same horizontal line. One is a FORM and the other is a DIV.
<div id="miningArea">
<form id="curWorkForm">...</form>
<div id="buttonDescription">
To begin, click thde "Start" button.
</div>
</div>
I thought adding display:inline-block was the key to keeping the elements on the same line. But when I add
#buttonDescription {
display: inline-block;
}
My text element still appears beneath my FORM element -- https://jsfiddle.net/5j57hkLr/6/ . How can I get that other DIV element to appear on the same line?
When there is a lot of text, you have to limit the width of inline-block elements by applying width settings to them which allow both elements to fit into one line, for example width: 50% and width: 45%
Otherwise they will by default expand according to the text, which will result in 100% width when there's enough text to fill a full line.
These are the the 3 ways ways I would think about approaching this:
(Here is a your JSFiddle back with some changes.)
1:
.wrapper {
overflow: hidden;
border: red dashed 1px;
/* For Testing*/
}
.style {
margin: 0;
padding: 10px;
float: left;
}
<div class="wrapper">
<form>
<input class="style" placeholder="Enter Value" />
</form>
<button class="style">Submit</button>
</div>
2: Responsive
* {
box-sizing: border-box;
margin: 0;
}
input, button {padding:10px;}
input {width: 100%;} /* replace "input" with "input , button" if you want the button to take up full with*/
.column {
float: left;
width: 50%;
border: red dashed 1px; /*For Testing*/
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="row">
<div class="column">
<form>
<input class="style" placeholder="Enter Value" />
</form>
</div>
<div class="column">
<button class="style">Submit</button>
</div>
</div>
3:
* {
box-sizing: border-box;
margin: 0;
}
#mainWrapper {
overflow: hidden;
display: inline-block;
}
button,
input {
width: 100%;
padding: 10px;
}
.formWrap {
float: left;
width: 300px;
}
.btnWrap {
float: left;
width: 100px;
}
<div id="mainWrapper">
<div class="formWrap">
<form>
<input placeholder="Enter Value" />
</form>
</div>
<div class="btnWrap">
<button>Submit</button>
</div>
</div>
add this to your css
#buttonDescription,form {
display: inline-block;
vertical-align:middle;
}
Inorder for two or more elements to be on same line, all the elements should be made display: inline or inline blocks
Here is a working example: https://jsfiddle.net/6wjftgf2/2/
#buttonDescription,form {
display: inline-block;
}
<div id="miningArea">
<form id="curWorkForm"><input placeholder="My Form"/></form>
<div id="buttonDescription">
<button>My Button</button>
</div>
</div>
You can also use flex for this work the code is as follows
.miningArea
{
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
form
{
width: 60%;
}
div
{
width: 40%;
}
.miningArea {
display: flex;
flex-wrap: wrap;
}
form { width: 60%; }
div { width: 40%; }
I'm trying to aligne an input field with a button at the bottom of a tchat.
Here is the result on normal screen size +15"
and here is the result on -15"
Html :
<div class="col footer">
<div class="divider"></div>
<div class="row footer-input input-container form-group">
<div class="input-field inline col s10 m10">
<input #messageInput type="text">
<label for="message">Tapez votre message</label>
</div>
<div class="col button-col s2 m2">
<a class="waves-effect btn blue"">
<i class="material-icons">send</i></a>
<app-loading-panel [visible]="isSending"></app-loading-panel>
</div>
</div>
</div>
Css :
div.divider {
margin-top: 2px;
}
div.footer {
position: absolute;
bottom: 0;
margin: 0;
width: 100%;
}
div.input-container {
vertical-align: middle;
padding-top: 10px;
}
input[type=text]:focus:not([readonly]) {
border-bottom: 1px solid #2196F3;
box-shadow: 0 1px 0 0 #2196F3;
}
input[type=text]:focus:not([readonly]) + label {
color: #2196F3;
}
div.footer-input {
margin-bottom: 0;
}
div.button-col {
height: 100%;
}
I'm not good with css, how can I have the input take all the place it can, the button be at the right and centered vertically and nothing going out of bound ?
this might help you from a basic perspective:
Have a container that's a flex box
Assign a flex-grow of 1 to the input
This will ensure the input takes up most of the space whilst the button remains on the right.
.container {
width: auto;
background: #ebebeb;
display: flex;
flex-direction: row;
}
.container input {
flex-grow: 1;
}
<div class="container">
<input type="text" placeholder="Some Stuff"/>
<button> Button </button>
</div>
I am developing a web app with meteor and material design lite.
Here is what I want to do :
Here is the result with a too small window :
And here is the result with a bigger window :
The HTML code :
<template name="myRefrigerator_header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">My Refrigerator</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
</div>
<!-- Simple Textfield -->
<div id="msg-layout">
<form action="#">
<div class="mdl-textfield mdl-js-textfield" id="msg-layout-content">
<input class="mdl-textfield__input" type="text" name="content">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
<button class="mdl-button mdl-js-button mdl-button--primary"
id="msg-layout-add-button">
Enregistrer
</button>
</form>
</div>
</header>
</template>
And the CSS applied to it :
#msg-layout {
background-color: #F5F5F5;
margin: 0px 25px 15px 25px;
padding-left: 10px;
padding-right: 10px;
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
}
#msg-layout-content {
color: #3F51B5;
flex: 1 1 0;
}
#msg-layout-add-button {
}
I don't understand why I don't have the right behavior, I have specified that I only want one row and that my input should resize.
What am I getting wrong ?
First, you need to give the id="msg-layout" to the <form>. Only direct children of a display:flex layout will get the special attributes of flexible containers. You are negating flexbox by nesting a <form> where the flexible children would be. Your flexible layout only has one child, the <form>.
This is the best resource I have found for learning flex-box https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would suggest trimming things down. Flex-box isn't the problem, and more that libraries of style rules make a lot of assumptions - that you may not be able to see from the top.
Here is a stripped down version / http://codepen.io/sheriffderek/pen/MKzMgp
HTML
<form class='this-form' action='#'>
<label class='input-w' for='sample1'>
<input type='text' id='sample1'>
<span>Text...</span>
</label>
<button>Enregistrer</button>
</form>
SCSS
* { // reset box model
box-sizing: border-box;
}
.this-form {
display: flex; // a
flex-direction: row; // b
align-items: center; // d
max-width: 24rem;
padding: .5rem;
border: 1px solid blue;
.input-w {
position: relative;
flex-grow: 1; // c
input {
width: 100%;
border: 0;
border-bottom: 1px solid gray;
&:focus {
outline: none;
+ span {
transform: translate(0, -50px);
opacity: 0;
}
}
}
span {
position: absolute;
bottom: 3px;
left: 0;
color: gray;
font-size: 12px;
transition: 1s;
}
}
button {
height: 30px;
background: transparent;
border: 0;
color: blue;
margin-left: .5rem;
}
}
The mdl-textfield__input class has a set width of 300px due to animation limitations. You need to override this (say width: 100%) to get an expandable textfield. However, this may have adverse affects on the animations since CSS animations don't like unknown lengths.