X-Cart forums

[Robwuk]

Hi, im using 4.6.6 ideal responsive template

I basically want to add some code to what is generated when displaying the images for the special offers at the top of the page

currently i have 3 offers displaced, but when i reduce the browser these overlap

what i want to do is add css to make the images scale down, i have the css code and tried it out (firefox dev tools) now i want to add the css whatever is outputing that code

Any ideas

just to make it clearer, i want three boxes 300px wide but when the browser is scaled down, the images will scale down to (obviously not in mobile view)

Thanks

Rob

[totaltec]

Rob,
It is easier to help when you link to the actual page.

It should be very easy to do, you just need to find a CSS selector that helps you isolate these specific images.

So if they are in a class like .special-offers you could write the CSS:

.special-offers img {
  width: 32%;
  height: auto;
  margin: 0 auto;
}

[razortw]

Please provide a link to your shopping cart, it is hard to say for sure without seeing the actual layout.
Thanks.

[Robwuk]

Thankyou for replies

the website address is www.gifts4anglers.co.uk

There are three boxes at the top, i plan on having these square, but do not want them to overlap in any way, like they do at present.

Using developer tools i was able to add to the code, an auto width and maximum width 100%, when i made the browser smaller the images shrunk, which is what i would like, obviously not on the mobile view, but just for tablets and normal browsers

Rob

[Robwuk]

Originally Posted by totaltec

Rob,
It is easier to help when you link to the actual page.

It should be very easy to do, you just need to find a CSS selector that helps you isolate these specific images.

So if they are in a class like .special-offers you could write the CSS:

.special-offers img {
  width: 32%;
  height: auto;
  margin: 0 auto;
}

I did get it sorted, sort of with this help

I wanted the image to be 100% width of the space it was providing, ie 33% for example, and used just

.special-offers img {
  width: 100%;
}

as id didnt want this happen on all views, i found the code to set the media screen widths and was able to set my width for mobile aswell as browsers

but thanks for input, really helped

Rob