product image to the left on product_info.php

[dinopacha]

in product_info.php the product image is on the right side of the website, and the text is left.
Now if the text is long it will comes to the image.

 

I would like to put the product picture (that is now on the right side of the text) to the left side of the text.

 

Where can I change that.

 

Can I change it with pull-left?????

 

 

 

​

[♥Tsimi]

You could use pull-left and pull-right to swap quickly the positions but you might need to remove the float: right; definition from the #piGal inside the custom.css.

It would be best to re-code or re-style the product info page anyways by using the Bootstrap grid system.

Maybe something like this

<div class="row">
  <div class="col-sm-4">
    IMAGE CODE HERE
  </div>
  <div class="col-sm-8">
    DESCRIPTION CODE HERE
  </div>
</div>

[dinopacha]

Hi Lambros,

 

I try that alteady but when I view it on ipad or iphone the image goes back to the right...

[dinopacha]

The whole problem is that I want to have a box-shadow on the image, and the text is also bumping on the left side of the image.

I already try to give the image a margin-right 10px, but the box shadow will also have 10px more on the left when I do that.

And then I have a white spot of 10px.

 

Thats why I want to put the image to the left and the text to the right, so I can give the text a little margin or padding on the left.

[♥Tsimi]

Did you remove the float right definition inside the custom.css for the #piGal id? Or you could probably add float:none!important; to the user.css

[dinopacha]

@Lambros

 

I did underneath but it does't do the  job what I want.

#piGal {
  float: left!important;
}

I just did the following and it seems to work.

#piGal {
   margin-left: 20px;
   box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

:)

 

[♥Tsimi]

If float none doesn't work then just remove the float right from the custom.css

If you are satisfied with your solution then keep it as is of course.

[dinopacha]

Yes I try that allready but when I do the following:

<div class="row">
  <div class="col-sm-4">
    IMAGE CODE HERE
  </div>
  <div class="col-sm-8">
    DESCRIPTION CODE HERE
  </div>
</div>

#piGal {
   float: left!important;
}

the image goes to the left and te text to the right, but if you have a lot of text then will it go over the image, so you can't click on the image.

Then I must give z-index.

I think the problem is that the text is using the whole width​.

 

But anyway I have fixed it now with just putting the following code in user.css.

know I have my margin and my shadow on the image :)

#piGal {
   margin-left: 20px;
   box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

[Sam-AUST]

 

On the product info page, do you know how to put in a margin after the text so it doesn't touch the image?

[Sam-AUST]

Ignore that, I used the exact code, when it should have been .piGal not #piGal, now it works.