align image to the left and text to the right in storefront custom page NO edit

Ok, I had some advances, I could center excerpt but still have star rating left-handed.
I also could lift the title (it had some clear that I set to none and done)
here the code so far, I`ll keep trying to center now title at the top and try to center the star rating too…and to get some space between image and excerpt </strong>

/*Float image to the left*/
ul.products li.product img {
	float: left;
}

/*Add hover to image*/
a:hover img { border:solid #eeccdd 5px; 
}

/*Change Title color and float text to right*/
ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2, ul.products li.product h3{
	color: #cc5588;
	float:right;
	width: auto;
}

/*Center Excerpt and price and Button Get it now*/
ul.products li.product{ 
text-align: center;
}

/*Lift Up title*/
.beta, h2 {
	clear: none
}

• This reply was modified 5 years, 8 months ago by webdevtestus.

Hey @webdevtestus – you can add your stars to the right but adding the following:

ul.products li.product .star-rating {
  float: right;
}

It seems to me that working with either CSS grid or flexbox would allow you to change around a lot of the elements you’re looking to move.

Here are gamified tutorials for each of them:

* https://cssgridgarden.com/
* https://flexboxfroggy.com/

Hi, @jobthomas and thanks
For some reason it does not work at all
In fat, I can only move stars with marginf-left : 45%; or any value, BUT it moves within whole site, I only need to style THIS star rating, don`t know how

By the way, I knew flexbox froggy, but didn`t know Grid garden, awesome tool! thanks
thanks!

Hey @webdevtestus – as soon as I disable your auto right margin, the star ratings align to the right:

Link to image: https://cld.wthms.co/pExM2F

Hey @jobthomas, thanks a lo, that gave me the tip to solve most of things so far
I still have to put Price at the bottom, just before the Badge, but I can t (I used order and some PHP magic buit it didnt work)

?	Changed float: left to title to display:inline-block
/*Change Title color and float text to left*/
ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2, ul.productsli.product h3{
olor: #cc5588;
display: inline-block;
	width: auto;
}
?	SOLVED added padding: 10px to image - make some space between image and text
/*Float image to the left*/
ul.products li.product img {
	float: left;
	padding: 10px;
}

Hi @webdevtestus,

So at this point, you need to move the price below the excerpt, down next to the add to cart button. Is that right?

That should be possible by rearranging the order of the items in your custom shortcode. Could I get you to go to https://gist.github.com/ and add the code for your shortcode there? Then copy the URL to the gist they give you and paste it here in your reply. That way I can see the code you’re working with.

Thanks,

Thanks a lot @3sonsdevelopment

here the link

https://gist.github.com/webdevtestus/1b7afc4044c0037d9666dd83ba3f1813

for some reason the php code don’t work at all, neither the CSS