Lower half of small logo gets truncated

andrewwinkler

The lower half of the "small logo" gets truncated on mobile phone screens. I assume that I somewhere need to change the image height but can't work out where/how.

saguaros

andrewwinkler

In this file: /templates/ja_wall/themes/iwall/css/theme.css

Line 2475, I see this declaration:

#header #logo h1 a {
    background-image: url(../images/redpill.png) !important;
    width: 65px !important;
    height: 100% !important;
}

you can change the height property to: height: inherit !important;

andrewwinkler

Ok, I changed that, but it is still truncating the lower part of the mobile logo.

saguaros

andrewwinkler

You can try edit above rule to:

#header #logo h1 a {
    background-image: url(../images/redpill.png) !important;
    width: 65px !important;
    height: 56px !important;
}

#logo {
  height: 56px;
}

andrewwinkler

Much better. Now the mobile logo is also shown on the desktop on smaller browser widths. However the logo is still being truncated, both on top and bottom.

aman204

andrewwinkler However the logo is still being truncated, both on top and bottom.

Try change the height value here also accordingly around line 2349 in similar css file :

#header #logo {
    height: 45px;
    background: none;
    overflow: hidden;
}

andrewwinkler

I had to change the logo back to the main logo because the mobile redpill.png didn't look good. It is again being truncated both on the right side and at the bottom.

aman204

andrewwinkler It is again being truncated both on the right side and at the bottom.

You may change the width value here accordingly in this file i.e. templates/ja_wall/themes/iwall/css/theme.css around line 2358

#header #logo {
    width: 176px;
    height: 32px;
    background: none;
    overflow: hidden;
}

andrewwinkler

Thank you for the quick follow up, but that change made no difference. The logo is still being truncated.

supportguy

andrewwinkler

You can share the FTP account so we will have a closer look and check for you

aman204

andrewwinkler Thank you for the quick follow up, but that change made no difference. The logo is still being truncated.

Kindly check now. Ref: Screenshot in responsive mobile mode. Have changed the width value here in similar file around line 2097 along with adding !important in order to supersude other similar declarations although this is specifically to target responsive screen size below 430px :

#header #logo {width: 276px !important;}

Kindly ensure to clear your browser cache if changes dont reflect

andrewwinkler

Done. Please have a look.

andrewwinkler

I changed the 276px to 176px and added !important but it made no difference.

Joshua-M

Hi,

I've edited your theme.css file, please check your mobile version now..

Cheers
Joshua

andrewwinkler

Thanks, a lot. Much better. Just one little problem. The search feature covers up part of the upper half of the logo.

teitbite

andrewwinkler Hi. Please try add this to css:

#header #search {
width: 45px;
}

andrewwinkler

Where exactly (which line) do I need to do this? I cannot do it globally.

pavit

andrewwinkler Where exactly (which line) do I need to do this? I cannot do it globally.

Hello

Change in this file /templates/ja_wall/themes/iwall/css/theme.css line 2119

#header #search {
		top: -7px;   <--------------Change this 
		margin-right: 0;
		margin-left: 0;
		padding: 0;
		border: 0;
		width: 45px; <-------------Add this
	}

Regards

andrewwinkler

Perfect. Thank you so much.