Joomla Templates Club 406,261 posts

[sbhsadmin Friend sbhsadminJoin date: November 2013Posts: 5Downloads:0Uploads:1 Thanks: 2]

#201390

Hi, I would like to move the Biz logo with red border to the position of the green border

I have added the below to the custom.css file

.logo-image .logo-img {
height: 78px;

width: 400px;
margin-left: -25%;
text-align: left;

The problem is it would not be responsive.

Please advise

Cheers

Paul

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#549865

Hello can you share working site url here , so that i can check it and give you suggestions .

[sbhsadmin Friend sbhsadminJoin date: November 2013Posts: 5Downloads:0Uploads:1 Thanks: 2]

#549869

http://www.southbromsgrove.worcs.sch.uk/teachingschool2/index.php

Thank you

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#549914

Hello did you added small logo from template options ??
Template >>JA ONepage >>Themes >>Logo >>enable small logo
Upload your small size logo for small devices . current size of logo is very large in width this is causing the issue .
if you want to resize the current logo you can try this css in your custom.css file

@media (max-width: 768px) and (min-width: 220px)
.logo-image .logo-img {
height: 40px;
width: 160px;
background-size: auto 39px;


You can set the width and height value as per your need .
Above css code will work for devices between 768 px screen to 220px screen size devices .

Hope it helps you

[sbhsadmin Friend sbhsadminJoin date: November 2013Posts: 5Downloads:0Uploads:1 Thanks: 2]

#549953

Hi

unfortunately this does not help.

I still need to move the logo to the left

Thank you

Paul

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#549955

Try This . . . .

Within your custom.css file, paste the following CSS rule:


.logo-image .logo-img {
margin-left: -120px;
}

Better ??

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#549995

Hello to make the logo smaller try my above suggestion in post #4 .
To make the logo in the left , add this css code into your custom.css file .

@media screen and (min-width: 768px) {
.logo {
margin-left: -121px;
}
}


It will look like this >>>> http://prntscr.com/4nw2a5

Apply changes clear cache . and check .

1 user says Thank You to Pankaj Sharma for this useful post

1. sbhsadmin

[sbhsadmin Friend sbhsadminJoin date: November 2013Posts: 5Downloads:0Uploads:1 Thanks: 2]

#550156

Thank you for your help

[Author]

Posts