X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)
-   -   Spcial offers layout / coding query (https://forum.x-cart.com/showthread.php?t=73150)

Robwuk 11-25-2015 02:19 AM

Spcial offers layout / coding query
 
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 11-25-2015 05:19 AM

Re: Spcial offers layout / coding query
 
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:
Code:

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


razortw 11-26-2015 04:57 AM

Re: Spcial offers layout / coding query
 
Please provide a link to your shopping cart, it is hard to say for sure without seeing the actual layout.
Thanks.

Robwuk 11-26-2015 08:34 AM

Re: Spcial offers layout / coding query
 
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 12-01-2015 12:55 AM

Re: Spcial offers layout / coding query
 
Quote:

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:
Code:

.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

Code:

.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


All times are GMT -8. The time now is 12:46 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.