Recent
Categories
View Replies (5)

Grafik - mobile display help - header image, logo

0
Votes
Undo
  1. bludove
    bludove
  2. Sherlock Holmes
  3. Commercial Templates
  4. Friday, 03 July 2015
  5.  Subscribe via email
I specified a header image and on desktop it looks great. However on mobile it sticks to the top of the page.

I did change (for desktop display) the background image to the following. 



#body_bg, #container_header {

  background-attachment:scroll;

  background-size:contain !important;

}


The background size originally was cover instead of contain but it didn't look right in the design.

On mobile display, the photo ends up at the top of the header and underneath the logo (see screenshot). I don't know how to fix this.

----

2. I would like the logo centered on mobile display - any way to do that?

3. I would like the quote tab centered on mobile display - any way to do that?

4. copyright is not showing up on mobile display at all

5. need footer menu centered.

Thank you in advance for your help.



Lisa
Responses (5)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Lisa

Would you have a URL to your site and we will examine these issues further?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
bludove
bludove
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
here's the URL - http://bludovedemo.com/propay
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Lisa

1. As your background image is a lot wider than it is high, it is reduced in size to fit making it a lot smaller and no longer visible under the header. To resolve you could change the size on smaller screen devices with something like the following (add to Custom CSS field)...


@media only screen and (max-width: 767px) {

    #body_bg, #container_header {

        background-size: auto auto !important;

    }

}


2. Try also adding the following to your 'Custom CSS' field...


@media only screen and (max-width: 1024px) {

	#logo {

	    width: 100%;

	}

	.logo a {

	    left: 50%;

	    margin-left: -110px;

	}

}


3. Are you referring to the 'Request a Quote' form (http://bludovedemo.com/propay/index.php/request-a-quote)?

4. To ensure your copyright appears on all screensizes try also adding the following...


#copyright {

    display: inline !important;

}


5. Try also adding the following...


#footermenu ul li {

    display: inline-block;

    float: none;

    text-align: center;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
bludove
bludove
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Everything worked. Thank you =)

3. I'm referring to what I am calling the request a quote button that I have in the header-1 position. I would like to have it centered on the phone display both landscape and portrait. However with each size device it's going to change so how do I make sure it stays in the center? (for tablet and desktop it is fine the way it is)
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To center your header-1 module positions on mobile devices try also adding the following to the Custom CSS field of your templates parameters...


@media only screen and (max-width: 959px) {

.header-1 {

    left: 50%;

    margin-left: -110px;

    right: auto;

}}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok