How to change the width and height of logo when browse in mobile device?

Hi victorlai,

you can open the file skin/frontend/default/jm_monsieur/css/layout-mobile.css there you look for the below css rule

HTML Code:

 h1#logo a {
  height: 49px;
  min-height: 49px;
}

you can change the height value here and add a width value I think that would help.

It won’t help much! Finally it come out like this. Please refer attachment.

Hi victorlai,

you can open the file skin/frontend/default/jm_monsieur/css/layout-mobile.css there you look for the below css rule

HTML Code:

 h1#logo a {
  height: 49px;
  min-height: 49px;
}

you can change the height value here and add a width value I think that would help.

Let me know the size you wish to change and PM me your FPT credential, I shall handle those changes for you.

Already PM.

Let me know the size you wish to change and PM me your FPT credential, I shall handle those changes for you.

I think the tweak below is minor, you can try the fix yourself. Please open …skin/frontend/default/jm_mago/css/layout-mobile-portrait.css file, look for following CSS rules and make changes declaration in red:

Code:

#jm-header{
...
} 
increase height value here

#jm-header .main{
...
}
 increase height value here

#jm-header #logo{
...
} 
increase height

h1#logo a{
...
} 
increase height

#jm-header #logo{
...
} 
increase width

.btn-toggle{
 ...
}

increase top

#jm-header .inner-toggle.inneractive {
...
}
increase top

Hope this helps.

I tried already as what you mentioned, but it’s not help.

I think the tweak below is minor, you can try the fix yourself. Please open …skin/frontend/default/jm_mago/css/layout-mobile-portrait.css file, look for following CSS rules and make changes declaration in red:

Code:

#jm-header{
...
} 
increase height value here

#jm-header .main{
...
}
 increase height value here

#jm-header #logo{
...
} 
increase height

h1#logo a{
...
} 
increase height

#jm-header #logo{
...
} 
increase width

.btn-toggle{
 ...
}

increase top

#jm-header .inner-toggle.inneractive {
...
}
increase top

Hope this helps.

@ Victolai,

Our technical support team has just updated code on your site directly. Please let us know if any issue remains

Yes, thanks. Good job.
But I would like to know how to do it, so that next time when I face the same problem, I would able to solve it.
Please let me know which code has been updated.

@ Victolai,

Our technical support team has just updated code on your site directly. Please let us know if any issue remains

@ Victolai,

FYI on my tweak, I did modify 3 files on your site, including:

1. ../skin/frontend/default/jm_monsieur/css/layout-tablet.css:

Code:

Change:
h1#logo a {
	height: 49px;
	min-height: 49px
}
To:
h1#logo a {	background-size: auto 42px;
	height: 49px;
	min-height: 49px
}

Add:
#fbfanbox iframe {	width: 100% !important;}

2. ../skin/frontend/default/jm_monsieur/css/layout-mobile.css

Code:

.btn-toggle {
	height: 80px;   /* old value is : 49px*/
	line-height: 80px;   /* old value is : 49px*/
}

.quicksetting-toggle strong {
        height: 80px;   /* old value is : 49px*/
	line-height: 80px;   /* old value is : 49px*/
}

.btn-toggle.active {
	height: 82px;  /* old value is : 50px*/
}

#jm-header .inner-toggle.inneractive {
	top: 80px; /* old value is : 49px*/
}

#jm-header {
	min-height: 80px;  /* old value is : 49px*/
}

.jm-search {
	height: 80px;  /* old value is : 49px*/
}

.jm-mycart .btn-toggle {
	height: 80px;  /* old value is : 49px*/
	line-height: 80px;  /* old value is : 49px*/
}

.jm-mycart .btn-toggle.active {
	height: 82px;  /* old value is : 50px*/
}

h1#logo a {
	height: 70px;  /* old value is : 49px*/
 	width: auto;
}

Add:
#fbfanbox iframe {
	width: 100% !important;
}

3. ../skin/frontend/default/jm_monsieur/css/layout-mobile-portrait.css

Code:

Change:
#jm-header #logo{
	width: 169px;
}
To:
#jm-header #logo{
	width: 295px;
	height: 80px;
	left: 0;
}

Change:
#jm-header {
	min-height: 105px
}
To:
#jm-header {
	height: 129px;
}

Changed:
#jm-header  .main {
	height: 79px; /* old value is 56px */
}

Change:
.btn-toggle {
	top: 56px
}
To:
.btn-toggle {
	top: 80px;
	height: 49px;
	line-height: 49px;
}

Changed:
#jm-header .inner-toggle.inneractive {
	top: 129px;  /* old value is 105px */
}

Add:
.quicksetting-toggle strong,
.jm-mycart .btn-toggle {
	height: 49px;
	line-height: 49px;
}

.btn-toggle.active,
.jm-mycart .btn-toggle.active {
	height: 50px;
}