Solved Templates

Unable to center align our logo in Gazette Template

Asked by Sean Carney 3 years ago Last activity 3 years ago

I am having a problem getting the center alignment of our logo at https://test1.theraliv.org

I believe we have been having a conflict with the between the logo upload field in the Template Options and the Logo position the Gazette template.

Initially we uploaded our logo from within the Template Options -> Basic -> Logo field. That worked but we were unable to get the height and alignment that we wanted.

So I asked for help and you graciously provided the following css which is in our custom.css section in the template options. 

.logo-image {
    height: 110px !important;
}

#sp-header{
    height: 110px !important;
}

That helped but we were still not able to get the logo size we wanted. So, we removed the logo from the field in the Template options and instead published the logo as a custom module in the "logo" position. Then we had a nice sized logo. We still needed to keep the custom.css that you had provided to get the height to work.

We then found that we are unable to get the logo to align to the center. As I have been inspecting the logo space with developer tools it seems that there is a conflict of sorts. There is a div called logo that is 110 pixels high which is probably coming from the custom.css above. But, the div called logo is also about 103.52 pixels wide. It is being loaded to the right side of our Logo and pushing the logo to the left, thus preventing the logo from aligning to the center.

Can you suggest the best solution for us?

Here is an image where you can see the div logo pushing our logo to the left side.
https://drive.google.com/file/d/1ZVtet61kUEwENsFmDLZ6z1KC6zaxDG--/view?usp=share_link

Accepted answer

Marked as the solution
Sean Carney Asked this
3 years ago

Thank you so much. I was playing around just now and realized that putting the logo into the logo position as a module instead of just uploading the image through the Template Options was not a good idea. I created a new logo and uploaded it via the Template Options -> Basic -> Logo field
and was able to get the logo to align in the center. And, the logo looks good in a wide screen and also on a mobile view. It seems like it gets distorted a bit when it is in a view that is not wide or narrow. Odd.

Here is the code I am using now in the Custom CSS field of the Template Options:

.logo-image {
    height: 110px !important;
    padding: 6px 0px 6px 0px !important;
}

#sp-header{
    height: 110px !important;
}

4 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
3 years ago

Hi

Thanks for contacting us. Use this custom CSS


#sp-mobile-logo{
  padding: 15px 0px 20px 70px !important;
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

-Regards.

Mehtaz Afsana Borsha Staff
3 years ago

Ok is this good now?

Sean Carney Asked this
3 years ago

My apologies for the slow response. Yes, this is good now. Thanks for asking.

Mehtaz Afsana Borsha Staff
3 years ago

Glad to know that.

Log in to reply.