Joomla Templates Club 406,261 posts

[gpnetin Friend gpnetinJoin date: March 2015Posts: 17Downloads:0Uploads:4 Thanks: 4]

#208896

Would like to put the search boxes in the middle or on top of the background image (see attachment as sample). Please advise how….

Thanks

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#577755

Hi there
Please provide your site URL for inspecting.

Thank you,
Viet Vu

[gpnetin Friend gpnetinJoin date: March 2015Posts: 17Downloads:0Uploads:4 Thanks: 4]

#577850

pm sent with site URL info. Please let me know.

[gpnetin Friend gpnetinJoin date: March 2015Posts: 17Downloads:0Uploads:4 Thanks: 4]

#644144

pm sent with site URL info. Please let me know.

[gpnetin Friend gpnetinJoin date: March 2015Posts: 17Downloads:0Uploads:4 Thanks: 4]

#742778

pm sent with site URL info. Please let me know.

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#577857

Hi there
Please try this one

.t3-wrapper .t3-section.has-slideshow .search-now {
margin-top: -484px;
}

Thank you,
Viet Vu

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#644151

Hi there
Please try this one

.t3-wrapper .t3-section.has-slideshow .search-now {
margin-top: -484px;
}

Thank you,
Viet Vu

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#742785

Hi there
Please try this one

.t3-wrapper .t3-section.has-slideshow .search-now {
margin-top: -484px;
}

Thank you,
Viet Vu

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#577898

Hi there
Just wonder have you solved ?

Thank you,
Viet Vu

[gpnetin Friend gpnetinJoin date: March 2015Posts: 17Downloads:0Uploads:4 Thanks: 4]

#578209

Thanks for your reply and it works. However, the location (“margin-top: -250px;) seems inconsistent or not responsive/adaptable if viewed in different units (PC, tablet, iphone/android). Is there any variable to be changed?

[gpnetin Friend gpnetinJoin date: March 2015Posts: 17Downloads:0Uploads:4 Thanks: 4]

#644500

Thanks for your reply and it works. However, the location (“margin-top: -250px;) seems inconsistent or not responsive/adaptable if viewed in different units (PC, tablet, iphone/android). Is there any variable to be changed?

[gpnetin Friend gpnetinJoin date: March 2015Posts: 17Downloads:0Uploads:4 Thanks: 4]

#743132

Thanks for your reply and it works. However, the location (“margin-top: -250px;) seems inconsistent or not responsive/adaptable if viewed in different units (PC, tablet, iphone/android). Is there any variable to be changed?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#578273

<em>@gpnetin 484096 wrote:</em><blockquote>Thanks for your reply and it works. However, the location (“margin-top: -250px;) seems inconsistent or not responsive/adaptable if viewed in different units (PC, tablet, iphone/android). Is there any variable to be changed?</blockquote>

You can try to fix it with my solution below

Open templates/ja_directory/css/custom.css file

find and change

.t3-wrapper .t3-section.has-slideshow .search-now {
margin-top: -250px;
}

to

@media (min-width: 1200px) {
.t3-wrapper .t3-section.has-slideshow .search-now {
margin-top: -40%;
}
}


with other device like tablet, iphone/android, you have to change the value in % as above to consistent with resolution

@media (max-width: 991px) {

}
@media (max-width: 480px) {

}
@media screen and (min-width: 768px) {

}


[Author]

Posts