The problem is I am using BootSlider.js that I cam across online, and it does everything that i require it to, apart from one thing. The actual slider set white-space:none on its main div.
So as you will see in the slider panels in the url above, I have text in each panel that needs to wrap. This text is in a tag. If I set white-space: wrap on the SPAN in each panel, then you will see that the more wrapping text, the further away from the top each panel sits.
I have tried to see what the CSS problem is but am stuck - would be great if anyone could help?
It's using bootstrap 3 no option to use 4 sadly.
Try to add this rules to .index-inner1
.index-inner1 {
display:flex; /* add this line */
flex-direction: column; /* add this line */
padding: 8px !important;
min-height: 290px !important;
cursor: pointer !important;
}
Related
Example: https://jsfiddle.net/notayam/4mLzus0y/
I set top-padding and bottom-padding to zero, and the layout display of the box model in the inspector shows 0 above and below, but as you can see from the jsfiddle there's still blank space there. And furthermore it's not centered vertically.
Adding vertical-align: middle !important; didn't help.
I got it centered vertically by trying different values for line-height, but that doesn't get rid of the unwanted padding above and below the text.
I dug out some older code that had a similar situation (using bootstrap) that I had muddled around with long enough to get it roughly like what I want. It used display: inline-block where this uses block. and although I have no idea if that might help I tried including display: inline-block !important; here. But it still shows up as block in the inspector; it shows both my css and spectre css specifying inline-block, but then block on the element. I couldn't figure out where that was coming from or why the override didn't work.
Tips on debugging CSS more efficiently would be very welcome. I really just need to get a table to display a whole bunch of data as compactly as possible, and would love to get that to work and never have to go near CSS ever again.
The rest of the app uses Python 3/Airium/Bottle, if that might matter. Running on Firefox 100.0.2 on MacOS 12.1. I'll only be running it locally so support for other browsers doesn't matter to me.
.btn {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: unset !important;
}
I don't know if I understood what you want, but here is some solution:
.btn-group .btn {
padding-top: 0;
padding-bottom: 0;
/* This is to clear line height */
line-height: 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
We can transform your buttons to flex boxes, so you then can control height, and have no vertical padding.
In my React.js im using conditional rendering to display or not display some elements.
The problem I'm having is that since my Main element is a flexbox all elements move when new element is rendered.
Example image from my project:
MainElement
On the link, there are two pictures, 1st picture is when button is toggled to 'Learn' mode, and 2nd picture is image on 'Normal' mode.
On the bottom of the picture we can see that rendering the 'Record:' element shifts all middle elements upwards (since the CSS justify-content of flexbox is set to 'space-between').
main.css:
main {
font-family: 'Inter', sans-serif;
font-family: 'Libre Baskerville', serif;
margin: 75px auto;
background-color: #29416E;
border: 3px solid #D9C241;
height: 650px;
width: 1100px;
max-width: 1300px;
border-radius: 5px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
Main.js:
<div>
<h3> {points} points / {mistakes} mistakes</h3>
{normalMode && <h4 className='main--textCenter'>Record: {pointsRecord ? pointsRecord : 0}</h4>}
</div>
The goal I'm trying to achieve is that when rendering new elements, elements stay on the same spot, and the conditional element pops up in its designated place without moving any other elements.
Question I'm having is how to solve this issue? Should I avoid flex when conditional rendering, or is there a way to bypass this by rendering empty placeholder objects?
From my own understanding, everything is working as it should. Since, please take note, there is conditional rendering, some blocks of HTML are literally not there if that condition is not met.
That's why I said it's working as it should, your flexbox and CSS, in general, are working fine.
My suggestion
Actually, this has been a hint from the placeholder elements thing you mentioned in your post.
Since you know for a fact that you want to display an element based on a condition ie normal mode set to true you could display another element while this condition is not met ie normal mode set to false.
I would suggest more CSS for the element you should display if the normal mode is set to false.
This would interchange these elements based on the condition that has been or is currently matched.
I hope I leave you in good shape.
Happy Hacking!!!
I am attempting to remove the hover effect padding on a Wordpress plugin called "Smart logo showcase". Here is the test page I have been working on:
http://brainstormmarketing.agency/dev/afroteqadvisory/test-clients/
So basically just the logo needs to be hoverable with no extra padding around it.
I have tried various code snippets and the class is called .smls-grid-image-wrap for the entire logo block.
I have tried to use padding: 0; but with no luck. Please assist
Because min-height and min-width are applied.
You can try tu use these properties for disable that
min-height: inherit;
max-height: inherit;
padding: 0;
Then, if you want to add spaces between elements you can add margin
Or, you can "hack" this with transparent background instead of color #d5fcfd
You can try
background-color: transparent;
Add this css:
.smls-hover-type-2 .smls-grid-image-wrap:hover {
background-color: transparent;
}
I am trying to put the social icons to center, but without any result. Someone who knows what I can do to make them in center? https://postwork.se - I am talking about the social icons in the footer
Easiest way it to add this style to the p enclosing them.
First add a class to the p, like this:
<p class="social-icons-footer">
Then add the style in your css file:
.social-icons-footer {
width: 250px;
display: block;
margin: 0 auto;
}
You could utilize
/* style for div parent of links */
div {
display: flex;
justify-content: space-around;
}
To do that wrap all the links in div and apply this to it. See screenshot below.
But in order for it to work properly wrap all images with
<a>
tag.
Notice that flexbox is not yet supported in older browsers in case you require to support them.
screenshot of display: flex
I have added a small newsletter subscription text box to the footer of my website, and I'm having some alignment issues.
Form code on its own: http://liveweave.com/hAK1q6
What it looks like on its own:
Footer code after adding form to it: http://liveweave.com/k3L5h7
Switch to Split V or View mode to fully see the Footer preview
Alignment issue:
As you can see, padding appears all screwed up in the background, and the overall form is also not center aligned.
How do I fix this issues ?
give your form-wrapper cf `display:block;
this will solve (mostly) the appearance problem
and afterwords change some margin and padding of elements
Reduce margin value in margin: 150px auto 50px auto from .form-wrapper class and give float: left or display properties. such as block or inline-block.
Add these style in .form-wrapper
margin: 0 auto;
display: block;
Check it here http://liveweave.com/d4cUjW.
screenshot: