I have a search bar at my website page http://positivelynuts.co.uk/blog/
It shows only for half width on mobile devices and looks small. How can I make it responsive using CSS so that it takes the fullwidth on mobiles and comes above the pagination page links ?
<div class="blogpage_search" style="width: 50%; float:left;">
<form role="search" method="get" id="searchform" class="searchform" action="http://positivelynuts.co.uk">
<div class="search-form">
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>
</form>
</div>
first take the style="width: 50%; float:left;" element out and add this to your css file:
.blogpage_search {
width: 50%;
float: left;
margin-top: 7px;
}
#media screen and (max-width: 600px) {
.blogpage_search {
float: none;
width: 100%;
margin: 10px auto;
}
}
That should do the trick! Thank you!
use width:100%;
<div class="blogpage_search" style="width: 100%; float:left;">
Related
I'm trying to create a login page like this:
What I created so far looks like this:
With this code:
<div class="control-section" style="max-width: 100% !important;">
<div class="row" style="height:100%;">
<div class="col-md-4" style="height: 100% !important; padding-top: 25px !important;">
<section>
<form id="account" method="post">
<h4>LOGIN </h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
<div class="form-group">
<p>
<a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="#Model.ReturnUrl">Register as a new user</a>
</p>
<p>
<a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
</p>
</div>
</form>
</section>
</div>
<div class="col-md-8" style="max-width: 100% !important; height: 100% !important;">
<img src="~/Resources/placeholderimage.png" />
</div>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
<style>
.container {
max-width: 100% !important;
height: 100% !important;
}
.col-md-4 {
height: 100%;
display: table-row;
}
.col-md-8 {
height: 100%;
display: table-row;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
</style>
As u can see theres an empty white space at the bottom of the page even though I resized my image to huge dimensions, somehow it does not fit to the 100% of my page. How can I set the static height of 100% to my image? Hope someone can help.
Thanks
You can use 100vh instead of 100% on your img or col-md-8.
Possibly the image does not stretch the full width of col-md-8 in which case you can:
img {
width: 100%;
height: 100%;
object-fit: cover; /* cover makes the image stretch the width and height of the container */
}
And you can also make sure the col-md-8 takes up 100% of the height like this.
col-md-8 {
max-width: 100%;
height: 100vh;
}
Add CSS Media Query to change image fit on screens below 993px
#media and screen(max-width: 992px {
img{
object-fit: contain;
}
}
Although I would advise against it, if you must change the height of the element without changing the size of the parent, you should probably set the height: 100vh
Obviously since the viewport height is not calculated properly or as expected on mobile you should probably try to calculate the height of the window.innerHeight on window.addEventListener('load') and on window.addEventListener('resize') using something like this:
const vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)
window.addEventListener('resize', () => {
const vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)
})
Then applying it to your element as so: height: calc(var(--vh, 100vh) * 100)
Obviously a simpler solution would be using height: 100% and you would avoid any possible overflow.
Try this:-
Remove height from row and columns and give this class in row m-0
<div class="col-md-8" !important;">
<class ="bk-one-more-div"style="width: 100%!important; height: 500px>
<img src="~/Resources/placeholderimage.png" class="img-fluid w-
100">
<div/>
</div>
I'm a CSS/HTML newbie and have tried to do research on this but am stumped. I've seen others with a similar problem, but their submit button and text field are only slightly misaligned. Mine is vertical but I want it horizontal.
I tried adding display: inline-block to both the text field and submit button elements, but it didn't fix the issue.
Here is the embed code for the form:
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://julienkozak.us14.list-manage.com/subscribe/post?
u=f46b7a895f8d332e0127067ad&id=4fbc88f22f" method="post" id="mc-
embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate"
target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-
EMAIL" placeholder="e-mail address">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none">
</div>
<div class="response" id="mce-success-response" style="display:none">
</div>
</div> <!-- real people should not fill this in and expect good things -
do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input
type="text" name="b_f46b7a895f8d332e0127067ad_4fbc88f22f" tabindex="-1"
value=""></div>
<div class="clear" ><input type="submit" value="Get Updates"
name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
The rest of the code you see is the CSS :
/* MAILCHIMP top form */
#mc_embed_signup {
text-align: center;
width: 300px;
}
/* Styles the header text above the inputs */
#mc_embed_signup h2 {
font-size: 18px;
margin: 0 0 20px;
color: #000000;
text-align: center;
}
/* Adds extra space around the input boxes */
#mc_embed_signup .mc-field-group {
padding: 10px 0;
}
/* Styles the input boxes */
#mc_embed_signup input {
width: 200px;
background: white;
height: 40px;
border-radius: 0px;
display: inline-block;
}
/* Styles the subscribe button */
#mc_embed_signup .button {
background-color: gray;
color: #ffffff;
margin: 0 auto;
width: 100px;
height: 40px;
display: inline-block;
}
julienkozak.com/ The form is at the top of this page.
Thank you so much for your patience with me.
Have you considered using bootstrap?
You could also use bootstrap's row functionality to dynamically set the fields of your div tag to a certain part of the page. This has the added benefit of making your page responsive to a variety of screens and monitors.
You can use flexbox on the wrapping div mc_embed_signup_scroll using display:flex. I put margin-top:10px on the button to align it with the input field.
/* MAILCHIMP top form */
#mc_embed_signup {
text-align: center;
width: 300px;
}
/* Styles the header text above the inputs */
#mc_embed_signup h2 {
font-size: 18px;
margin: 0 0 20px;
color: #000000;
text-align: center;
}
/* Adds extra space around the input boxes */
#mc_embed_signup .mc-field-group {
padding: 10px 0;
}
/* Styles the input boxes */
#mc_embed_signup input {
width: 200px;
background: white;
height: 40px;
border-radius: 0px;
}
/* Styles the subscribe button */
#mc_embed_signup .button {
background-color: gray;
color: #ffffff;
margin: 0 auto;
width: 100px;
height: 40px;
margin-top:10px;
}
#mc_embed_signup_scroll{display:flex}
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://julienkozak.us14.list-manage.com/subscribe/post?
u=f46b7a895f8d332e0127067ad&id=4fbc88f22f" method="post" id="mc-
embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-
EMAIL" placeholder="e-mail address">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none">
</div>
<div class="response" id="mce-success-response" style="display:none">
</div>
</div>
<!-- real people should not fill this in and expect good things -
do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f46b7a895f8d332e0127067ad_4fbc88f22f" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Get Updates" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
How would I get the elements on my page to fit vertically when the page is resized?
Right now it works horizontally up until a certain point, but how would I do it for devices with different height orientations? It would be nice if the elements could dynamically resize or something.
Code below:
<div id="topPane">
<h1 id="georgeLogo">Logo</h1>
<div id="login">
<div id="facebookLoginButton">Continue with Facebook</div>
<br class="lb">
<div class="center">or</div>
<br class="lb">
<input type="text" placeholder="Email Address" required>
<br class="lb">
<input type="text" placeholder="Password" required>
<br class="lb">
<div id="standardLoginButton">Login</div>
<br class="lb">
<div id="copyright">© Copyright 2014</div>
</div>
<div id="bottomPane">
<div id="loginPane">Login</div>
<div id="registerPane">Sign Up</div>
</div>
Jsfiddle: http://jsfiddle.net/3bcbstn6/
Try to use media queries, for example min-height and max-height in combination with
units like vhwhich are relative to the window height, example:
#media only screen and (max-height: 550px) {
#georgeLogo {
font-size: 14vh;
}
#login {
margin-top: 8vh;
}
.lb {
line-height: 4vh !important;
}
}
#media only screen and (max-height: 400px) {
#georgeLogo {
font-size: 14vh;
}
#login {
margin-top: 2vh;
}
.lb {
line-height: 1vh !important;
}
}
Jsfiddle: http://jsfiddle.net/h30c863e/1/
More information and examples here: http://css-tricks.com/viewport-sized-typography/
I have aligned textboxes with their labels using the line-height method proposed here. I didn't simply use the width attribute because I wanted it to dynamically adjust if the label text changed. To get Firefox (haven't tried other browsers) to apply the line height to the column with the inputs, I had to use this hack (note the <div class="hack">):
HTML
<div class="textbox-column label">
<div>User Name:</div>
<div>Password:</div>
</div>
<div class="textbox-column input">
<div><div class="hack">#</div><input type="textbox" name="username" /></div>
<div><div class="hack">#</div><input type="password" name="password" /></div>
</div>
<div class="clear"></div>
CSS
div.clear {
clear: both;
}
.textbox-column {
line-height:1.6em;
}
.textbox-column.label {
float: left;
margin-right:1em;
}
.textbox-column.input {
float: right;
}
.textbox-column .hack {
display: inline;
width: 1em;
margin-right: -1em;
}
Can any one suggest a cleaner solution?
Here is a live demo of this code: http://jsfiddle.net/fbe7P/
CSS works best when things are grouped together, so I would group the controls into rows.
Also, the plus side of this method is that it degrades well for small screen sizes.
HTML:
<div class="row">
<label for="username">Username:</label>
<input type="text" id="username" />
</div>
<div class="row">
<label for="password">Password:</label>
<input type="password" id="password" />
</div>
CSS:
.row {
overflow: auto;
}
.row label {
float: left;
min-width: 100px;
}
.row input {
float: right;
}
Demo: http://jsfiddle.net/ezp9H/2/
I have the following html:
<div id="holder">
<span>Search for</span>
<input id="srchfor" />
<span>near</span>
<input id="srchin" />
<span>submit</span>
</div>
The containing div is fixed width. The width of the 3 spans will depend on font size. Is it possible to make the two inputs take a width so that they are both equally sized, and they consume all the remaining space in holder? Or does this require using javascript?
Edit: My aim is to have the 5 elements all on one line, rather than split over several lines.
This is an old post but I came across it and figured I would answer it for the next person. Here is a CSS/HTML snippet that should resolve this issue. It is kind of like a HTML5 flexbox but without HTML5 or a flexbox. You can add width to whatever 2 sections needed and the third will fill the remaining void.
<style type="text/css">
.form-group {
border: 1px solid black;
margin-bottom: 20px;
padding: 10px;
width: 75%;
}
.a {
float: right;
margin-left: 10px;
width: 30%;
}
.a input {
width: 100%;
}
.b {
float: left;
margin-right: 10px;
width: 33%;
}
.b input {
width: 100%;
}
.c {
display: block;
overflow: hidden;
}
.c input {
width: 100%;
}
</style>
<div id="wrapper">
<div class="form-group">
<span class="a">
<label>Thing 1</label><br />
<input type="text" />
</span>
<span class="b">
<label>Thing 2</label><br />
<input type="text" />
</span>
<span class="c">
<label>Thing 3</label><br>
<input type="text" />
</span>
</div>
<div class="form-group">
<div class="a">
<label>Thing 1</label><br />
<input type="text" />
</div>
<div class="b">
<label>Thing 2</label><br />
<input type="text" />
</div>
<div class="c">
<label>Thing 3</label><br>
<input type="text" />
</div>
</div>
</div>
Well, you could change the display type from display: inline to display: block to make them fill space. But I don't know if the inline is an requirement.
You have to choose a fixed width for the span elements, and use the display:inline-block property like in this example.