Recent
Categories
View Replies (7)

Some elements not properly responsive.

0
Votes
Undo
  1. muddasirpk
    muddasirpk
  3. Commercial Templates
  4. Thursday, 18 April 2013
  5.  Subscribe via email
Our website http://www.canadawestla.com/

If you just resize your broswser to 1/3 or 1/4 or reduce size then you can notice that all the elements on page properly align but few are not like

a) Search box appear at top instead of it default position?
b) Logo at top does not reduce its size and appear out of box?
c) Top banner, 'Provide Litigation Loan Canada Wide' in black also hide behind menu/
d) Social icons also hides?

How to solve and make these elements responsive and align properly.
Responses (7)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

I have amended your CSS slightly and your banner should now be appearing correctly. As previously stated due to the way the search module is positioned your only option is to hide it on smaller screen sizes.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
muddasirpk
muddasirpk
Accepted Answer Pending Moderation
0
Votes
Undo
Sended you email , please review.
  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
May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
muddasirpk
muddasirpk
Accepted Answer Pending Moderation
0
Votes
Undo
Still, 'Provide Litigation Loan Canada Wide' does not aligh properly and came out of box at right if we resize our browser to around 1/4 , on half resize it works fine but if we do more small it come out of box at right.

Also search box changes its position even if we did not re size the browser.
  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
Hi Munir

Try changing the CSS to...


[code type=css]@media only screen and (min-width: 768px) and (max-width: 959px) {
#offlajn-ajax-search327 {display:none;}
}

@media only screen and ( max-width: 767px ) {
#offlajn-ajax-search327 {display:none;}
h1.logo a {background-size:400px;}
#container_spacer1 {float: left;}
#socialmedia {display:inline; top: 63px;}
#container_spacer1 .custom img {margin-left: 7px;}
}

@media only screen and (max-width: 440px) {
#offlajn-ajax-search327 {display:none;}
h1.logo a {background-size:300px;}
#container_spacer1 {float: left;}
#socialmedia {display:inline; top: 63px;}
#container_spacer1 .custom img {margin-left: 0px;}
}[/code]

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
muddasirpk
muddasirpk
Accepted Answer Pending Moderation
0
Votes
Undo
Worked on some parts,

still our banner 'Provide Litigation Loan Canada Wide' in black in alliging at right rather middle

Also, search box and social icons disappers when we resize our browser to small.
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Munir

Sorry to say due to the way the search module is positioned your only real option is to hide it on smaller screen sizes otherwise try adding the following to the Custom CSS field of your templates parameters..


[code type=css]
@media only screen and (min-width: 768px) and (max-width: 959px) {
#offlajn-ajax-search327 {display:none;}
}

@media only screen and ( max-width: 767px ) {
#offlajn-ajax-search327 {display:none;}
h1.logo a {background-size:400px;}
#container_spacer1 {float: left;}
}

@media only screen and (max-width: 440px) {
#offlajn-ajax-search327 {display:none;}
h1.logo a {background-size:300px;}
#container_spacer1 {float: left;}
#socialmedia {display:inline; top: 63px;}
}[/code]

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
  • 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.