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;
}
Related
I am currently making the footer of my project, and somehow every element I code seems to move every time I (or the user) resizes the window.
I have tried -
margin: 0 auto;
position: relative; float: left;
EDIT:
Code:
.pdiv{
/* div might be helpful? */
}
.footer {
position: relative;
left: 300px;
}
Try to use flexbox in your footer,
footer {
display: flex;
justify-content: center; // or flex-end, flex-start of your choice how you want them to look
align-items: center; // or same as above
}
Make yourself a favor and please use flexbox instead of floats, please, floats are not meant to do layout, this is more historical as before flexbox, there was no "universal" nor "adapted" way to compose clear layouts (dont start me on table's, plz).
This may help you:
https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/ (Float to Flexbox migration)
https://flexboxfroggy.com - A game to learn Flexbox
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 many addons and what I orginally wanted was an additional "addon bar" (like the "Addon bar restored") where I could put my addons' buttons. Unfortunately, Firefox Quantum (version 57+) only accepts WebExtensions or CSS code in the userChrome.css file. I'm trying this second option: modifying the .css file to make the url bar's width as big as I want and make the overflow of the navbar create a "second" bar (or rather, a second line) underneath it, where the overflowing addons' buttons will stay.
With the following code, I can increase the urlbar-container width to what I want, but nav-bar doesn't overflow and therefore the addons' buttons don't overflow to a second row.
#urlbar-container {
min-width: 1000px !important;
}
#nav-bar {
//dsplay: block;
overflow-x: visible !important;
overflow-y: visible !important;
overflow: visible !important;
max-height: 500px !important;
}
Does anyone know how can I: 1- increase the width of the urlbar-container and 2- make the nav-bar overflow so that instead of hiding the overflowing buttons it will display them in a new row underneath it?
This is a working code:
#urlbar {
width: 100%;
}
#urlbar-container {
//min-width: 1000px !important;
flex: 0 0 80% !important; /*change the size to what you like*/
}
#nav-bar-customization-target {
display: flex;
flex-wrap: wrap !important;
align-items: center;
align-content: center;
}
#nav-bar {
min-height: 80px;
height: 100%;
}
It works well, but I wish I could substitute rule min-height: 80px to something less hacky in #nav-bar. I tried 2em and 200%, but only pixels worked. This is bad because if I decrease the window's width, new flex rows are created, but they are cropped out due to the height restriction. Am I missing something?
Centred flexbox items can have undesirable behaviour when they overflow their container.
Several non-flex solutions have been provided for this issue, but according to MDN there is a safe value which is described as follows.
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
It can be used as follows.
align-items: safe center;
Unfortunately, I haven't been able to find any examples or discussions of this, or determine how much browser support there is for it.
I have attempted to use safe in this CodePen. However, it doesn't work for me. The safe seems to be ignored, or perhaps the container element is improperly styled.
I'd really appreciate it if anyone could shed some light on safe and whether and how it can be used to solve the overflow problem, as demonstrated by the CodePen example.
The newer keyword safe still has bad browser support, so to get the same effect, cross browser, use auto margins for now, which should be set on the flex item.
Updated codepen
Note, to compensate for the modal's 50px top/bottom margin, use padding on modal-container.
.modal-container
{
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start; /* changed */
position: fixed;
width: 100vw;
height: 100vh;
overflow-y: scroll;
padding: 50px 0; /* added */
box-sizing: border-box; /* added */
}
.modal-container > #modal
{
display: flex;
flex-direction: column;
align-items: center;
margin: auto 0; /* changed */
padding: 12px;
width: 50%;
background-color: #333;
cursor: pointer;
}
safe isn't implemented in most browsers yet. You can recreate some of its functionality with auto margins.
I was trying to use justify-content: safe center to have a bunch of items centered in a footer when the viewport was wide, but have them able to scroll without clipping off the left side when the viewport was small.
When I tried to fix this with auto margins as Ason suggested, it did fix the clipping, but it also spread the items out evenly, which isn't what I wanted.
I found I could simulate safe center in this context by applying auto margins to only the first and last elements.
Assuming my flex items have class "item":
.item:first-child {
margin-left: auto;
}
.item:last-child {
margin-right: auto;
}
CodePen with examples comparing each solution
Use align-items: flex-start; instead of using it with the safe keyword, Also, you can add margin/padding to get the desired behavior for the same.
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.