We moved to new unified forum!

Please post all new support queries in our New Forum.

T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
View Replies (5)

Resolved Beginner need help on center the logo & responsive on mobile layout

0
Votes
Undo
  1. apple
    apple
  2. General Discussion
  3. Tuesday, 10 December 2013
  4.  Subscribe via email
Hi,

Need help....

I been tried to align the logo to center of the page, unfortunately it was failed.
my logo size
width : 500px;
height :338px

header.php
params->get('sitename') ? $this->params->get('sitename') : JFactory::getConfig()->get('sitename');

$slogan = $this->params->get('slogan');

$logotype = $this->params->get('logotype', 'text');

$logoimage = $logotype == 'image' ? $this->params->get('logoimage', '') : '';

if ($logoimage) {

  $logoimage = ' style="background-image: url('/.JURI::base(true').'/'.$logoimage.');"';

}

?>        

          a href="/<?php echo JURI::base(true) ?>" title="">


here is my site : http://www.beauty-injections.com

i also found out that the logo is not responsive on mobile layout. can anyone help.


Thanks in advance
Comment
There are no comments made yet.
Responses (5)
apple
apple
Accepted Answer Pending Moderation
0
Votes
Undo
anyone can help ???
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Admin
Admin
Hole-in-One Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi apple,

To align the logo to center, just add margin: 0 auto to your logo css style rule.
Make sure you do not have float style, or your can overwrite it with float: none.

For the responsive:
1. You can use media query and 'background size' to control the size of logo on mobile.
2. Change to <img tag instead of using background-image as above
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
apple
apple
Accepted Answer Pending Moderation
0
Votes
Undo
Hi

Thanks for your response.

I had tried using the firebug to adjust the custom.css

logo {
float: none;
width: 0 auto;

but the logo still not align to center.

for the responsive:
Can you please more specific, I not really understand which file should be modify or how to change to <img tag.

Can you pls help..

Thanks a lots.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Admin
Admin
Hole-in-One Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi apple,


You can try with:

.logo {

  float: none;

  width: 100%;

}



.logo-image {

  margin: 0 auto;

  float: none;

  display: block;

  position: static;

  width: 500px;

}


And if you want to change the markup, you can try with /templates/[yourtemp]/tpls/blocks/header.php file

Regards
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
Paul
Paul
Accepted Answer Pending Moderation
0
Votes
Undo
as currently your custom styling isn't working

.logo-image a {
background-image: url("../images/logo.png";);
background-repeat: no-repeat;
width: 300px;
height: 200px;
}

alternatively you could use a different font and apply that font to the h1 that is currently hidden and then add a background image that repeats across the .container.header
and then center the h1

Cheers
Paul
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.