Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
Home | Profile | Register | Active Topics | Members | Search | FAQ
Save Password
Forgot your Password?

Find us on Facebook

Follow us on Twitter

View our YouTube channel

 All Forums
 CSS and Responsive Designs
 header image problem
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

Advanced Member

140 Posts

Posted - 10/24/2017 :  08:38:51  
I'm working with Responsive Design Gadgets template 0003rd00grb0088 for php. the website url is as you can see I removed most of the text and added the image. I'm having problems with the header image adjusting to the smaller size. The width is set to 100% and when you look at it in smaller devices the width shrinks normal. However if I set the height to 100% it stritches the image and lowers the black links bar. I've played with the picture size and the height has to be set to 162 pixels for it to line up correctly. I edited the image to 930 x 162 thinking that would solve the problem and I can set the height to 100% but it still stritches the picture.

In the code I found class=auto-style1 when I trace it down it brings me to .auto-style1 {
vertical-align: middle;

Is there a way I can stop this from happening and set the image height and width to 100% so it will be correct in all devices?

Thank you,
Your Loyal Customer

ECT Moderator

95440 Posts

Posted - 10/24/2017 :  08:48:38  
Hi Paul

I'm not sure but maybe that should be

style="border: 3px solid #000000" width="100%" height="auto">

rather than

style="border: 3px solid #000000" width="100%" height="162">


Please feel free to review / rate our software

Ecommerce Template Expert

801 Posts

Posted - 10/25/2017 :  02:02:23  
You should give that header image its own ID so you can affect it separately from the rest of the img tags on the site...

Then the header image should be wrapped into its own div where it is... with that div having its own id... set the css for this div to 100% width and 100%height and overflow:hidden

set your header image to 100% width and 100% height with max-height:162px

these changes will get you closer to the elasticity that you are looking for

the height of the image in percentage will need to be adjusted to your liking using the @media calls...

When it gets late at night, go to bed... try again tomorrow.
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019
This page was generated in 0.02 seconds. Snitz Forums 2000