Change size of logo according to width screen

Hi,
Is it possible to change the width of my logo according to the width of the screen?
I have a very long logo and if i place it it looks pretty bad on a iphone...

Kind regards.

You can specify different logo image in following css files located in templates css folder.

Code: Select all

mobile.css
tablet.css


Css for Css logo option

Code: Select all

#gkLogo.cssLogo {
    background: url("../images/logo.png") no-repeat scroll 0 0 transparent;
    height: 30px;
    width: 154px;
}


See you around...

Thank you, that worked!

Do you also happen to know how the set the width of the menu? Now the menu goes very quick to de dropdown version.

Both website menu and mobile menu are rendered in html output, they are kept hidden by using css in available css files.

Code: Select all

mobile.css
small.tablet.css
tablet.css
template.css


Following are ids of each menu.

Code: Select all

#gkMobileMenu
#gkMainMenu


So if its a mobile.css which is loaded when certain screensize is met then following happens. Hides main menu then loads mobile menu.

Code: Select all

#gkMainMenu { display:none;}
#gkMobileMenu { display:block;}


If you don't want to hide mainmenu in mobile css then open the file and change it around so hide mobilemenu and remove lines to Mainmenu so it will use css from main template.css file.

Code: Select all

#gkMobileMenu { display:none;}


See you around...

Also worked! Thank you

Yet another question. All my images have a diffrent hight. How can I set a height for all my images in category (overview of all products and categories) en product page (the thumbnails under the big image)?

Kind regards

If you mean "SHOPS & TRENDS" module in frontpage that would be

Code: Select all

.gkNspPM-ProductGallery .gkImagesWrapper > div img { height: 200px; width 200px;}


In Category View

Code: Select all

.browseProductImage {height: 200px !important;width: 200px !important;}


Change sizes to your requirements.

Hi norman,

I want the image to be vertical and horizontal align within a box of 200x200px. So all images have same height and width and all the productnames start at the same heigth.

Please post your website link as it would be easier to check it in your site rather then guessing or trying to create same site all over in our server.

See you around...

This product overview
and
This category overview

Please use following css code.

Code: Select all

.category-view img {height: 200px!important;}
.browseProductImage {height: 100px!important;}


See you around...

Thank you so much!

No problem at all, see you around...

Hi Norman,

The 200px modification isn't yet good. Now it streches the images. Is there a way to maybe do this (but then in real code):
<div width:200px; height:200px; algin: absolute middle;>
IMAGE
</div>
Name product

Real code or css code effect would be same. You are using a general image size in css code so you have to resize your image sizes so they look ok or you need to modify php files and use another wrapper around image so you can give that a size so your product names etc looks aligned. Obviously then it might need adjusting in other css which we can't do.

So easiest option right now use same image size in your products or category images.

See you around...

Can you help me a bit further? Because this template is for an existing site with more then 3000 products. So new images isn't the best solution for me.

If you use 100px in category products view then it looks ok.

Code: Select all

.browseProductImage {height: 100px!important;}