Basel Compare CSS styling

Hello,

I’d like to style your new Basel Compare that it would look like previous YITH Compare looked like on our site.

What I want is to have vertical-align in .compare-field and in .compare-value classes.
Also I want to have text-align: justify or text-align: left in .compare-value class (because now some text from the products’ desciption is justified, some centered).
And it would be nicer if the text in .compare-field class would be bolded.

Please find the printscreen which should help you to understand better what I ask for.

Could you please give me correct CSS code which I should put into Global Custom CSS in Theme Options to apply these changes.

Also there’s one additional and general remark about the Basel Compare. Perhaps it will be useful.
When Compare is opened on the mobile device, I think it’s not clear for the user that he should swipe the image or description of the shown product to the right or to the left if he wants to see another compared product. It relies now only on the common sense, because that grayed line in the bottom (which appears when user presses on the product’s description) isn’t seen in most cases. Maybe some buttons, arrows or another solutions would help the user to figure out quickly how to see other added products to Compare.

Best regards

Attachments:

You must be logged in to view attached files.

Hello,

Please provide your valid site admin access and Compare page URL.

Best Regards

Hi,

please find everything in Private content.

Thank you!

Best regards.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global

body .basel-compare-col{
	    text-align: left;
	justify-content: start; 
}

Best Regards

Hello,

I’d like to ask you again for the solution how is it possible to fix Basel Compare page display.

As I wrote you earlier some text from the products’ desciptions is justified, some is centered, I didn’t get why.

The code you provided fixed only the vertical-alignment (by the way I changed the property justify-content: start; in your code to justify-content: flex-start; because Custom CSS editor indicated a possible mistake).

So I used this code:

body .basel-compare-col {
text-align: center;
justify-content: flex-start;
}

I noticed that text-align: left; from your code also applied on the buttons TO THE CART and others, but I’d like to keep them centered. As well as everything in Compare-field (as it is differently displayed on mobile devices, the centered is fine to be there, too). That’s why I used text-align: center; in the code.

But Compare-value fields still need a solution for some uniform alignment. Can you check how it could be achieved?

Find the latest illustrating printscreen attached.

Best regards,

Attachments:

You must be logged in to view attached files.

Hi,

Your product description is justified because of align="justify" attribute property in your text paragraphs (http://prntscr.com/mbwt52). Try to remove it.

To change your compare product description align first remove previous custom code and try to add the following code snippet to the Custom CSS area in Theme Settings. Please did not change any part of the code snippet and paste it just like it provided.

body .compare-field {
	text-align: center;
	-webkit-box-pack: flex-start;
	-ms-flex-pack: flex-start;
	justify-content: flex-start;
}

.compare-description .compare-value {
	text-align: left;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: flex-start;
	-ms-flex-pack: flex-start;
	justify-content: flex-start;
}

.compare-description .compare-value:before {
	text-align: center;
}

Regards

Hello,

thanks for getting back with a new code.
I’m sorry, but I don’t think it’s a proper solution to change the alignment in all descriptions of all of the shop’s products just to have them properly aligned in Compare page.

By the way in previous Basel versions (with YITH Compare plugin still used), the alignment of compared products was uniform. I mean that there was nothing like now when one paragraph is justified, another is centered. And if it used to be displayed fine then, I guess it is not the alignment of products’ descriptions to blame.

What’s interesting is the fact that in your printscreen our products’ descriptions in Compare page are aligned exactly how I’d like them to be (they are justified).
But if I add the same two products to Compare page, some of paragraphs are justified and some are centered (but they have the same property align=”justify” in the products’ descriptions). See my printscreen. I draw the arrows aside the paragraphs that should be aligned justified, but are centered. Be sure that I used to clear my browser cashe to get such result every time I tried.

Therefore my appeal remains the same – it would be great if in Compare page the products’ descriptions would remain aligned the same way as they are aligned in our products’ descriptions. As they are seen in your printscreen (not in mine). So how is it possible to achieve text-align: justify; in .compare-value?

Perhaps your code could make it happen with some modifications?

Best regards,

Attachments:

You must be logged in to view attached files.

We have checked your site compare and it looks just how you described. Please check the screenshot (http://prntscr.com/mc1anm).

Regards

Hi,

yes, I just wanted to let you know that I tried to add your code and I got the same result as in your prinstscreen 🙂

This is exactly what I wanted to achieve. Products’ descriptions in Compare page now are aligned the same as in our shop.

So you provided a right solution. Thank you!

One more thing.
When I added the code in Custom CSS area in Theme Settings the CSS code editor showed me 3 remarks regarding some code lines. Please check if they need some adjustments:

1. -webkit-box-pack: flex-start;
Remarks:
expected (start) but found ‘flex-start’
the property -moz-box-pack should be included as well
the property -ms-box-pack should be included as well

2. -ms-flex-pack: flex-start;
Remark:
expected (start) but found ‘flex-start’

3. -webkit-box-align: start;
the property -moz-box-align should be included as well
the property -ms-box-align should be included as well

If the code should be tuned for better cross-browser compatibility, please let me know.

Thank you for your patient and kind assistance!

You can ignore editor remarks. Provided CSS prefixes are enough to work correctly in Internet Explorer 11 and same age Firefox browser.

Regards

Hello,

OK, thank you one more time.

And what about that YITH WooCommerce Compare plugin now – should I disable, deactivate or delete it after it was changed by Basel Compare element? What do you suggest to do with it?

Also there’s one more plugin Simple Twitter Tweets ver. 3.2 from the initial Basel version we bought. Its new available version 4.4 wasn’t tested with recent WordPress versions and was updated 3 years ago. So should it be updated from 3.2 to 4.4. and continue being kept activated and enabled along with Basel theme?

Best regards,

Hi,

Yes, you can disable the plugin now.
And we suggest you to keep an old version of the Twitter plugin and don’t update it since it is stable and our theme is fully compatible with 3.2 version.

Regards

[Author]

Posts