I need help aligning gravity forms on my website https://www.shiftins.com.
On my homepage, the field aligns left and the button is directly below it. How do I put them inline?
I tried looking for the css class "simple-quote" but could not find it anywhere. Any ideas?
give the list items display:inline; and the label and input div display:inline-block
#field_1_1, #field_1_2 { display: inline; }
#field_1_1 .gfield_label, #field_1_2 .gfield_label { display: inline-block; width: 20%; }
#field_1_1 .ginput_container, #field_1_2 .ginput_container { display: inline-block; width: 80%; }
Then play with widths for label and inputs for desired output.
Related
I have a page with tab navigation at the top (page here; tabs are 'Production,' 'Story and Development,' etc). I would like to ensure the row of tabs are horizontally centered on the page. How can I accomplish that? If I'm not mistaken, it's currently a tad off center.
By following the instructions on the W3 Schools page on CSS centering, I came close by setting:
display: block;
margin: auto;
width: 99%;
But I'm not sure if that's the proper/best solution. Is there a solution that does not require setting width: 99%?
If it matters, the site has been built with WordPress.
Thanks.
You have two ways you could approach this:
The text-align: center Method
.ut-nav-tabs li {
display: inline-block;
float: none;
vertical-align: top;
}
.ut-nav-tabs li:last-child {
margin-right: 0px;
}
.ut-nav-tabs {
text-align: center;
}
This works only if you declare text-align: center on the containing parent - the parent element must be a block element. The nested children elements must be inline block elements (e.g: display: inline-block) with no float rules declared on them, floats will negate any attempt to horizontally center align elements this way, and most other ways.
The display: flex Method
.ut-nav-tabs {
display: flex;
justify-content: space-around;
}
.ut-nav-tabs li {
float: none;
margin-right: 0px;
}
This is the "new kid" on the block and the "hot fix" for any alignment issue concerning CSS these days, I would hazard to say it is the "jQuery" of CSS now.
Anyway, it is for good reason, flex-box rules allows you to specify general alignment (horizontally and vertically) and lets the browser do all the calculations for precise positioning - this is also why is a popular responsive solution too.
Browser Compatibility: A heads-up though, flex-box has poor or very limited support for legacy browsers, older browsers may give you unexpected results, so you should use this with caution in production code if that will be a concern.
I think this way is better :
.ut-nav-tabs {
width: 100%;
text-align: center;
}
.ut-nav-tabs li {
width: 179px;
float: none;
display: inline-block;
zoom: 1;
vertical-align: middle;
}
I use the WP Featherlight plugin on Wordpress. I want to put the description of an artwork in the lightbox right next to the image, not underneath like it is at this moment. How can I do that?
You can see the website here.
Hope you can help me out!
You have to change the css properties of your lightbox and the corresponding figcaption elements.
Refer code & make the changes accordingly:
.gallery-item {
display: inline-block;
text-align: left;
vertical-align: top;
width: 100%;
min-width: 260px;
}
.gallery-icon {
display: inline-block;
vertical-align: middle;
}
.gallery-caption {
display: inline-block;
vertical-align: middle;
width: 100px;
}
Attaching screenshot after the above changes are done:
1. Set your gallery container (e.g. div#gallery-2) to flex row.
Like this:
display: flex;
flex-flow: row wrap;
2. Set figure.gallery-item to flex and align it's text, provide a fixed width (I used 25%) so items stack in row, otherwise each item will be full width pushing the next down:
Properties:
display: flex;
align-items: center;
width: 25%;
3. Give .gallery-caption some breathe from image.
Properties:
margin-left: 5px;
Thanks for the response. If the user clicks on an artwork then the lightbox will open. I want the description is on the right side of the artwork. In the lightbox I want to put some more info than on the actual page. Hope this is more clear.
I am trying to center the footer on a website but for some reason, the way I use that normally works won't work this time. Can anyone tell me why?
Site is here
It's set up using two classes, one inside the other
First one is called mainFoot:
.mainFoot {
background-color: #184879;
width: 100%;
height: 60px; /*had to include this because it would not appear otherwise. browser read it as a 0 height container*/
display: block;
clear: both;
}
Second is page-footer:
#page-footer {
width: 990px;
display: block;
clear: both;
margin:0 auto;}
I was using the same structure right above it for the bottom widgets and it worked as is, but for some reason, while i was setting this one up, I had to set a height property for the outer div to appear as it wouldn't read the inner div's height and adjust.
For reference, he similar set up I mentioned that DOES work is right above the mainFoot class and is controlled by the classes b4Foot and half-widgets:
.b4Foot {
background-color: #277bc1;
width: 100%;
display: block;
clear: both;
}
.half-widgets {
width: 990px;
min-height: 200px;
margin: 0 auto;
color: #fff;
}
To center the contents of a block, you need to set the style "text-align:center". However, note that you cannot center a block-type element within another block-type element. The inner element needs to have the display style of inline or inline-block.
To fix your problem, you need to: a) remove the fixed width, and b) change page-footer to display:inline-block. Currently it is display:table because of the class clearfix - you need to remove that class fromt he div.
you need to change just this line please see below and put on your CSS and see result
.mainFoot
{
background-color:#184879 !important;
height:60px;
width:auto;
}
footer.span12 { color:#DEDEDE; width:100%;}
#page-footer { display:block; margin:0 auto; width:990px;}
only change on .mainFoot , footer.span12 and #page-footer
Thanks,
I am trying to align div and all my efforts using float and margins didn't bring what I want. So I thought this is the right place
basically looping the below in Foreach:
<div class="comment_name">#Html.displayName</div>
<div class="comment_time">#Html.formattedDateTime(item.dTime.Value)</div>
<div class="comment_body">#item.displayComments</div>
and am trying to display like the below text:
Dispaly Name , 11 Feb 2013: User entered comment.
What should be the CSS to make it work?
Updated after Span answer
Span worked. But am having issues if the length of comment is long. am getting like below
Dispaly Name , 11 Feb 2013:The example will show you how to implement a read-only grid. This article tries to answer the following question
but which should be
Dispaly Name , 11 Feb 2013:The example will show you how to implement a read-only grid.
this article tries to answer the following question
You can use float: left on every div and clear: left; for the first one;
Demo: http://jsfiddle.net/9mfR8/
div {
border: 1px solid red;
float: left;
}
.comment_name{
clear: left;
}
Or you can use display: inline-block; for the three divs and enclose them in a container div (that is display: block by default and will force a "new line"),
Personally I would say use <span>s instead of <div>s as they are already inline elements:
<span>#Html.displayName</span>
<span>#Html.formattedDateTime(item.dTime.Value)</span>
<span>#item.displayComments</span>
If you want to stick to <div>s use:
display: inline;
or if the single containers have for example a fixed width:
display: inline-block;
Edit
To achieve the result in your updated question, you can use this:
HTML
<span>Dispaly Name,</span>
<span>11 Feb 2013:</span>
<span> The example will show you how to implement a read-only grid. This article tries to answer the following question.
</span>
CSS
span {
vertical-align: top;
}
span:last-child {
display: inline-block;
width: 400px;
}
DEMO
http://jsfiddle.net/jkZeZ/
The following should achieve what you require:
.comment_name {
display: inline-block;
}
.comment_time {
display: inline-block;
}
.comment_body {
display: inline-block;
}
How can I define a width for the label Quantity (see below)? I would like a CSS solution without defining a style on the span but directly on the label.
Something like:
span label[for=Quantity]
{
width: 200px;
}
But the above css doesn't work.
Your adding width to an inline element they wont accept that.
span label[for=Quantity]
{
width: 200px;
display: block;
}
using the inline-block is better because it doesn't force the remaining elements and/or controls to be drawn in a new line
.label {
width:200px;
display: inline-block;
}
you can make label a block element and set float to left so you can put other controls next to it
label {
display: block;
float: left;
width: 180px;
}