On my wordpress / woocommerce website I have a lot of product options, in my cart where those options are displayed - the options chosen are presented as a fluent text as oppose to have one option per row which would look a lot more structured and would be easier to read.
My question is if its possible, using CSS to structure the fluent text into rows, CSS would be the most convenient way for me to resolve it although I am open to other options as well.
Try adding the following product to cart LINK
Add to cart button says "LÄGG TILL I KUNDVAGN" on my language.
Then go to CART.
As you can see in the first column beneath the title and beside the product image - Type of option in regular text then : and chosen option in bold text.
First two options are "Bredd: 5 (480 mm) Höjd: 5 (480 mm)"
What I want is it to be displayed like this instead:
Bredd: 5 (480 mm)
Höjd: 5 (480 mm)
Etc.
Is there an easy solution to this problem? Again preferably via CSS?
Thanks a lot in advance!
if you would like all of the items stacked, apply
.variation{
display: flex;
flex-direction: column;
}
You can use flexbox for this. Add following CSS to resolve this issue
.tm-cell { /*Or you can update your selector*/
display: flex;
align-items: center;
justify-content: space-between;
}
if you inspect the html code you can see that the div surrounding the entries is:
<div data-uniqid="58ede56aeca6c6.03775072" data-logic="" data-haslogic="" data-fblabelshow="" data-fbvalueshow="" class="cpf_hide_element tm-cell col-6 cpf-type-select prod-height-div">
It's class width is set to 50%, so you can set it to 100% by adding this to your css:
.tm-extra-product-options .col-6,
.tm-extra-product-options .tm-cell.col-6,
.tc-cell.tc-col-6, .tc-col-6 {
width: 100% !important;
}
Related
I am a beginner but usually I somehow find a solution to my problem. But not this time.
I managed to code a box: Centered in the box there is the text "#01 Grunderna". This box looks nice.
#01 GRUNDERNA
However, when the text in the middle of the box is longer like "#02 Profil & Scensamlingar" then the text is overwrapping the box. Moreover, the text is not centered vertically.
#02 PROFIL & SCENSAMLING
Is there a way to be able to adjust this? I tried with font-size but it is still overwrapping the box, it is still not adjusted to the middle and the space between the lines stands the same.
Sorry for my lack of knowledge. Would be awesome to get some help.
By the way: Here you can see the mess
enter image description here
Remove the css rule padding: 1rem 1rem; from .home-service a. And add below css rule:
.home-service {
display: flex;
align-items: center;
justify-content: center;
}
Links in those boxes will be justified vertically and horizontally.
If you are using bootstrap, you may make use of the classes it provides. Check this page: https://getbootstrap.com/docs/5.0/utilities/flex/ especially "Justify content" and "Align items" sections. If you want to dig deeper about how flex in css works, check this link https://css-tricks.com/snippets/css/a-guide-to-flexbox/ then bookmark it for future use:)
Thank you so very much for solving my problem. It is like magic :) You should see my smile!
Anyway, I added it as additional css in the customize theme section as I did not find it in the theme editor yet.
I guess it is better to do the changes exactly as you mentioned in the theme-editor or does it not matter?
I need to have a button with a text (f.e. "add to basket") which is fluid in width. If the button width is too little to show "add to basket" it must cut to "basket" only.
I did achieve most of it by splitting
<span class="text">add to basket</span>
into two parts and reverse order them in dom
<span class="text">basket</span><span class="text text-prefix">add to </span>
and then show them in the correct order by adding
.text{
float: right;
}
However, the text inside the button must also be centered, which does not work so far.
Here is my fiddle, I'd appreciate any ideas: https://jsfiddle.net/5cavrrhc/
Under all circumstances, I want to avoid using JS for this.
Solution
Ok, here we go: https://jsfiddle.net/6etabchg/4/
Ok, my co-worker and I found a solution that works nicely.
make the button position: relative
make the wrapper display: flex; flex-wrap: wrap-reverse; justify-content: center; to reverse the order
make both inner spans display: inline-block;flex-shrink: 0;
make the one span that should remain order: 2
Working example: https://jsfiddle.net/6etabchg/8/
In addition to what we asked above, we needed a symbol before the text, shown as a square red in the example.
I've been facing a problem - I need to make a category page for an e-commerce website. The client's required design depicts that they need to get a horizontal line after the category title (which is dynamic).
I've done it to this part.
However, the issue arises when the client needs to change the category name. In the attached picture, it says "Category 2". Client may change it to 'Men's Collection', 'Winter Collection', 'Men' or whatever.
The problem is, since we don't know about the width that this category name is going to occupy, how can I manage the horizontal line's width (highlighted in a red box).
I'm also putting a screenshot of the css that I've applied.
The position of the line being absolute, width does need to be managed.
How can I manage this width? :(
Use a flexbox to solve the issue- see the example below:
.wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
.wrapper:after {
content: '';
flex: 1;
height: 1px;
background: #ccc;
margin-left: 10px;
}
<h1 class="wrapper">
category name
</h1>
IDK why is my question demoted.
However, I've done a little thing that will work fine =>
For the "Sort By" section, I've made the background color white.
For the whole row containing the category, :after line and Sort By section, I've hidden the overflow.
That's working fine, however I'ld have appreciated only if I could get some other approach to work.
Well it should be dynamic if you specify the width of the :after element as a percentage. Since it is getting the width of the parent (which is the title), the width will adjust on the percentage amount of whatever the title is.
So I've setup Compass for creating automatic sprites with SCSS. All goes well, it generates some nice CSS for me :-
.icons-sprite, .actions-new, .actions-edit, .actions-save, .actions-delete, .actions-refresh {
background: url('/content/themes/admin/images/icons-s0336d5eb89.png') no-repeat;
}
.actions-new {
background-position: 0 -48px;
}
... ... ...
Now I am creating a table, and in that table there is a "Action column" where you can perform functions on rows (delete or edit).
What is the generally accepted way (in html 5) for showing these buttons using sprites?
I've explored a few options and ran into a few problems
span I can't get this to show unless I place it in display: block mode and if I do that it inserts new lines after the item, and I don't want to have to float everything
div for some reason this one doesn't even show
img The biggest issue I am seeing with this one is the requirement for a src field, this means that I need to duplictate the url over and over again.
What do other people use for sprites inside links?
Use span and display: inline-block. This will make the span behave like an image, so you can apply vertical-align: middle. Support goes all the way back to IE6 if you use it on an inline element.
I have attached an example of what I am trying to achieve using html/css (if you cannot see the image it is: first name and surname, then second line is job description). I would like the all the text (both lines) to be forced justified (left and right) within a div but I am not sure if it is possible. I have tried a few things with no success. I would rather not use an image, so any idea would be greatly appreciated.
Browsers generally do a crap job at full justification. If you are a design company using this to promote yourself, I'd avoid it.
Also, it only works on paragraphs of text, not single lines.
You can try tweaking the CSS letter spacing to get the effect you're looking for.
Use text-align-last: justify:
.justified {
text-align: justify;
text-align-last: justify;
}
.justified:after {
content: ".";
display: inline-block;
width: 100%;
height: 0;
visibility: hidden;
}
http://jsfiddle.net/gilly3/En4wt/
source
Since you only want to style the title, you can create specific styles for it. Try combining font-size with letter-spacing until you get the effect you want to achieve.
Text align: justified is for a different purpose, it's meant for paragraphs (or long blocks of text). If you don't have enough text to reach the end of the line, it doesn't work.