Top: Current situation, Bottom: What I'm trying to acheive
I am attempting to modify the language switcher at the top of this Wordpress-based website so that both the flags display next to each other, inline, without having to first hover.
https://www.furuhostel.com/
I can't figure it out, so was wondering if anyone could help? Maybe it's not possible with CSS!
Thank you!
Make these changes in your code, change these classes.
#trp-floater-ls.trp-floater-ls-flags {
width: 100px;
display: flex;
justify-content: space-around;
left: 75%;
}
#trp-floater-ls-current-language {
display: none !important;
width: 100%;
height: 100%;
}
#trp-floater-ls-language-list {
display: flex !important;
}
I have inspecting the element within chrome as no code has been supplied for this example but from what I can see you need to:
Remove the currently selected item trp-floater-ls-current-language (I did this by just display:none).
Where the class trp-language-switcher-container is, you will need to remove the defined width of 50px so that the container takes the size of its children.
And lastly you will need to set the class trp-floater-ls-language-list to display: flex.
Hope this helps and is what you are looking for.
Related
im learning to make a weather app. Im having problems adding a blur effect to the background, i've done it already but it turns out one of the 4child divs gets out of its parent-div width. heres how it looks
Horrible. why does this happen and how do i fix it? im 99% sure its because of margin, but i dont know what else to use since i asked a question earlier in SO regarding to how to add "space-between" to both right columns and most answers said "margin". in case you wanna see and make a correct answer to that question as well, here's that question But for now, please answer this one. Here's a JSFiddle with the code. Is there any way to make div-width dinamic and always increase its size when needed? Because that would be a gamechanger
.containerStats{
display: flex;
position: absolute;
bottom: 22px;
margin-left: 12px;
width: 540px;
padding: 10px;
text-align: left;
align-items: center;
justify-content: space-around;
backdrop-filter: blur(10px);
border-radius: 10px;
}
#windSpeedKM{
margin-left: 4vw;
}
#humidityPorcentage{
margin-left: 4vw;
}
Remove width: 540px;
This way the container is free to resize according to child size. If you declare a width, the container will be fixed in size. You can also try different options like width: 100%; to get something more responsive.
If this answer helped you, please mark as accepted.
Remove width: 540px; which by default allows the container to span the whole window
How to reduce the space between li horizontal elements in my code, I've been trying to do it by changing padding and margin attributes (I have already tried setting those attributes to negative values, but it didn't help).
Below is the code that I'm trying
footer li {
display: flex;
flex-wrap: wrap;
width: 300px;
flex-direction: row;
justify-content: space-around;
font-size: 20px;
padding-right: 70px;
list-style: none;
margin-left: 10px;
}
Justify the parent of the list (not the list) to start and that gives you control over the list - the lists will now be flexibles of a flexed parent - you should be able to whatever you want with the lists if you follow this guide
First of all, the line "display:flex" has changed the display - so you are really not working with a normal list any more.
Secondly I can see you set "justify-content: space-around;" that has limited the ability of "margin" in your code;
Change "space-around" to "flex-start" and add margin as desired, or let "space-around" do its work
So here is the answer, maybe it will be of any help to those who don't know how to close the gap between li elements. Just add this property to your code and it will help you to reduce the space between elements. footer li:not(:first-of-type) { margin-left: -25px; } Problem solved and I would like to thank everyone for the help.
I need to align some buttons no matter how the content of previous elements changes. This is the markup that I currently have.
I currently have the buttons at the bottom not aligned as shown in the following image:
Notice that the buttons REQUEST DEMO are not properly aligned, so what I want is no matter the content in the previous p element is, they are aligned as shown in the following image:
Notice that here I used the same text to make it look aligned, but I want the buttons to be aligned no matter what the content of the text is.
I also need this functionality to be responsive since I am using bootstrap and for smaller screens, it shows two elements or one element per line.
I was thinking to add a min-height or max-height in the CSS, but this hasn't solved my problem.
Add this to your code and see if this is what you are looking for.
Documentation for flexbox
.row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.col-md-6 {
flex: 1;
margin-right: 10px;
padding: 50px;
}
.btn {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
There's a few ways to do this. The easiest way would be using flexbox, here's a snippet example https://codepen.io/imohkay/pen/gpard
.parent {
display: flex;
justify-content: space-between;
}
Another way you could do it is having a fixed height for every column, and absolute position the button to the bottom and maybe add some padding to the content so the text never overlaps the button.
Add this class .btn-boxto the buttons and and this class .padbot to the box
CSS
.btn-box{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%)
}
.padbot{
padding-bottom: 80px; // Adjust as your needs
}
DEMO HERE
I am trying to make a contact form in the center of a website, but for some reason, Bootstrap and CSS' transform: translate(-50%, -50%); (used for absolute positioning in the center of a website) doesn't play well with each other.
The problem: When both Bootstrap and CSS-transform is applied, the top-line/margin of the input field is removed, making the input field look bugged.
I can remove either the Bootstrap link (HTML line 2) or transform (CSS line 6) and it will look as intended, but I need both Bootstrap (for responsive design) and transform (for center positioning).
JS Fiddle (notice HTML: line 2 and CSS: line 6):
https://jsfiddle.net/t1txvv9d/
Hope anyone know a workaround for this? I would really appreciate help. Thank you.
You are better off with flex:
body, html {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Fiddle here and more about CSS Flexbox here.
I would clean up the code a bit: Remove the margin-right: -50%; (has no effect), add position: relative to .container and also add a height or at least a min-height setting to .container (depending what you are up to, a fixed px value or a percentage, which then also requires a height definition for the parent elements)
https://jsfiddle.net/b7Lry34n/1/
I'm trying to create my very first web site and I'm stuck on the menu buttons (navigation bar). Somehow I managed to create a button finally. Watched a few videos about CSS selectors by ID, by class and attributes, however whenever I try to modify the working code for the first button to apply for the rest of the buttons, it just does not work.. I am trying to use ID instead of Class selections (class works just fine) as I want to change the pictures and sizes of each button and to make all the buttons to be on the same line, which I could not also do by myself.
Here's my code with Class selectors, please advise how to make it with IDs as if I just change the dot with a hash tag, it doesn't work. It doesn't work if I try to re-order the selected parts like a, li etc.
JSFiddle example
#menu {
height: 70px; /* separating the next content from the button */
width: 0px;
text-align: center;
margin: 0, auto;
}
How do I do that and how do I make the menu be on the same line.. tried with float and with style="clear:both" after that for the content after the menu, but it doesn't seem to work.
First, you shouldn't use ids to select that kind of item. Better use ids to identify zones of your website.
But, you can find a working code here: http://jsfiddle.net/cjTN7/24/
#home, #about, #news { background-size: cover; }
#home {
height: 100px;
width: 100px;
}
#about {
height: 200px;
width: 200px;
}
#news {
height: 300px;
width: 300px;
}
For the inline menu, you set your #menu width at 0px. #menu should be 100% (or whatever bigger than your items inside) and set your items in inline-block instead of block.
I don't know if i understood well your issue but, hope it helps.
Good luck :)