VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: Brockney on July 05, 2016, 00:45:08 AM

Title: Category Image Alignment
Post by: Brockney on July 05, 2016, 00:45:08 AM
Screenshots
Title: Re: Category Image Alignment
Post by: Brockney on July 05, 2016, 00:45:52 AM
Hi,

I am finishing off a site on Joomla for E-Cigarettes and Vapes. I'm reasonably happy with it, although there is a slight difference between the image alignment on a laptop and a mobile.

On the laptop all of the Category images are centered.

On a mobile they are left aligned.

This is only the case for Category images. For Product images they are centered on both devices.

Would anybody know how I can make the Category images appear centered on a mobile?
Title: Re: Category Image Alignment
Post by: jenkinhill on July 05, 2016, 10:11:35 AM
http://forum.virtuemart.net/index.php?topic=128401.0

Title: Re: Category Image Alignment
Post by: GJC Web Design on July 05, 2016, 10:56:38 AM
plus it will simply be css ... Firebug and correct
Title: Re: Category Image Alignment
Post by: Brockney on July 05, 2016, 14:30:42 PM
Thank you both very much for your replies

I am using Joomla 3.5.1 and Virtuemart 3.0.14

The website is live at www.brockneysbaseline.website

An example of where the issue arises is brockneysbaseline.website/index.php/online-store/e-liquids

I am not fully aware of css (yet), I am still learning the entry stages

If you can help me overcome this issue it will be a great help because in general I am happy with the website

Many thanks
Title: Re: Category Image Alignment
Post by: Spiros Petrakis on July 05, 2016, 21:16:42 PM
Add the following to the end of temlpate.css file of your template or in the custom.css file if your template has such an option.

.category-view .category img {
  display: block;
  margin: 0 auto;
}
Title: Re: Category Image Alignment
Post by: Brockney on July 06, 2016, 23:41:54 PM
Oh my GOSH!!

Thank you, that was so easy and straightforward and has certainly inspired me to learn a lot more about css as well!

Works perfectly!  :D

Thank you for your help!