CODEWITHSUNDEEP
htmlcssresponsive-designopencart
user7036717
user7036717

Reputation: 1

Logo resize responsive opencart

I struggling to get my head around this issue. Basically my website stagstores.co.uk is a open based commerce site and is using a custom theme.

My problem is the logo (header) is not responsive and rest of the page is.

When I resize the page or view in mobile, everything changes apart from the logo.

I want the logo to change to another size logo when the page is resized, I looked at the code and figured how to auto-width the logo which basically just squashes it to a set width but thats not what I want just want the company logo part to appear.

Any suggestions on how it can be fixed?

Upvotes: 0

Views: 1000

Answers (2)

jogoe
jogoe

Reputation: 324

You could solve this by adding media queries to you style.css

@media(max-width: 330px){
  #yourimage_id{
     width: 30px;
     height: 30px;
  }
}

And just add it for every standard resolution so the logo is the right size for the right device/screen width.

To only get the company logo, it might be a smart idea to split the picture in three separate ones because it makes responsiveness a lot easier.

A workaround for that, is to set the picture as background-image of a div, and use background-position attribute so you get the part of the image you want!

Upvotes: 1

lky
lky

Reputation: 1129

I would highly recommend that you split the logo into its own image, same with the telephone and delivery section, this way the images can stack on top of each other when the viewport gets smaller.

You would require a % width on these so that they respond but since your header image is so wide, adding this would mean that they would go really small. Also you should use media queries as mentioned above.

Currently, your width on the image of 100% is not taking affect: https://i.imgsafe.org/6497dcec18.png

Resolving this would make your logo / header image responsive.

Upvotes: 0

Related Questions