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.
Related
I have made a basic Tabs component following this documentation here.
This is my current output.
Does anyone know the CSS to align ant-tabs-tab at the center?
I can see that there are different position placement however there isn't a top-center option.
Current CSS:
.ant-tabs-tab {
flex-grow: 1;
margin-right: 0px;
width: 80%;
text-align: center;
}
The output from the above CSS. I would like to keep the same size as the first image but have it center aligned. Not sure if this is possible but I thought I'd check first.
Do you mean like this?
.ant-tabs-nav-scroll {
display: flex;
justify-content: center;
}
You have a property called centered in the Tabs component and all your TabPane will be centered.
<Tabs centered>
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 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.
When I try to use flexbox to center items there is some overlapping content and misalignment.
https://jsfiddle.net/a9oc6gL8/1/
.footer_3 {
position: relative;
display: flex;
align-items: top;
justify-content: center;
top: 220px;
padding-bottom:100px;
}
.footer_4 {
position: relative;
display: flex;
align-items: top;
justify-content: center;
top: 190px;
}
To explain, I've drawn some extra rectangles to demonstrate what goes wrong.
The top-left and top-right columns together are as wide as the bottom-left and bottom-right bar, but are not the same ratio.
Now I could go and explain how to fix this, but I've noticed that you've been making a lot of mistakes throughout the document. I think it's more important that you try to get a little better at the basics, than trying the get the hang of flexbox.
Besides that. I've created a Fiddle that shows a fixed situation. I've given it a complete overhaul without flexbox.
What I've done, is create two columns that are both exactly 50% wide. They both float to the left. Like this, the text of the left and right side are always at the same spot. I've cleaned up the code (you were switching ul and li, using unnecessary classes, you used a plain ampersand (&) whilst you should type & when creating one... There was a lot wrong). Also. The '01', '02' etc. are now automatically generated with CSS.
The document has changed as a whole. I advise looking into it, and trying to understand what happens with every line of code. It'll sure teach you a thing or two.
Hope this helps
I've simplified your code. With these adjustments, your desired alignments come together:
CSS
.footer_3 {
display: flex;
width: 75%;
margin: 220px auto 50px;
}
.footer_4 {
display: flex;
width: 75%;
margin: 0 auto;
}
.about_description {
width: 100%;
}
DEMO
I want to reduce the size of the alert. I've tried:
.alert{
align-content: center;
width: 20%;
}
But it doesn't work, I've also tried to reduce the whole container width. I've also tried to make the alert the width of his content but didn't work either:
.alert{
display:inline-block;
}
My alerts contain and many links like that:
/website1
Try using
.alert{
align-content: center;
width: 20% !important;
}