Comments 3Rodrigo started the conversationJune 16, 2023 at 7:37pmHi!My Hampton Theme site is showing some inconsistency in the Hero section when accessed from different devices. As shown in the attached images, on tablets and smartphones the header logo overlaps the subtitle, causing an ugly appearance. How could you help me with this issue?Attached files: Sem título0.jpg Sem título1.jpg Sem título2.jpg 1,823Support repliedJune 19, 2023 at 2:51amHello Rodrigo,you can adjust the padding top of the hero caption on various devices (screen widths), for example:@media only screen and (max-width: 767px){ #hero.has-image #hero-caption { padding-top: 150px; }}@media only screen and (max-width: 1024px){ #hero.has-image #hero-caption { padding-top: 200px; }}in customizer -> additional CSSThank you. Clapat Support https://www.clapat.com/ Review Envato Item Support Policy 3Rodrigo repliedJune 20, 2023 at 7:39pmOK, thanks a lot! Now another issue, please... Is there a way to keep the hero video aligned to the right instead? It's because of the responsive adaptation, in some screens the person at the far right in beige suit don't appear in the frame, but he's an important character on the scene.https://fknbrothers.com/ 1,823Support repliedJune 21, 2023 at 5:03pmHello Rodrigo,try this CSS in customizer -> additional CSS.hero-video-wrapper video.bgvid { left: 40%;}the default left position is 50% therefore to bring it more to the left you can try 40% to bring it more to the right you can try 60%Thank you. Clapat Support https://www.clapat.com/ Review Envato Item Support Policy 3Rodrigo repliedJune 22, 2023 at 10:20pmThanks a lot!Is there a way to apply that only to ipad (medium) screens? 1,823Support repliedJune 23, 2023 at 9:05amHi Rodrigo,you can include the css in a media query for ipad@media only screen and (max-width: 768px) { .hero-video-wrapper video.bgvid { left: 40%; }}in any case you can replace 768 with 1024 in case this does not workThank you. Clapat Support https://www.clapat.com/ Review Envato Item Support Policy Sign in to reply ...
Hi!
My Hampton Theme site is showing some inconsistency in the Hero section when accessed from different devices.
As shown in the attached images, on tablets and smartphones the header logo overlaps the subtitle, causing an ugly appearance.
How could you help me with this issue?
Attached files: Sem título0.jpg
Sem título1.jpg
Sem título2.jpg
Hello Rodrigo,
you can adjust the padding top of the hero caption on various devices (screen widths), for example:
@media only screen and (max-width: 767px){
#hero.has-image #hero-caption {
padding-top: 150px;
}
}
@media only screen and (max-width: 1024px){
#hero.has-image #hero-caption {
padding-top: 200px;
}
}
in customizer -> additional CSS
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
OK, thanks a lot!
Now another issue, please...
Is there a way to keep the hero video aligned to the right instead?
It's because of the responsive adaptation, in some screens the person at the far right in beige suit don't appear in the frame, but he's an important character on the scene.
https://fknbrothers.com/
Hello Rodrigo,
try this CSS in customizer -> additional CSS
.hero-video-wrapper video.bgvid {
left: 40%;
}
the default left position is 50% therefore to bring it more to the left you can try 40% to bring it more to the right you can try 60%
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Thanks a lot!
Is there a way to apply that only to ipad (medium) screens?
Hi Rodrigo,
you can include the css in a media query for ipad
@media only screen and (max-width: 768px) {
.hero-video-wrapper video.bgvid {
}left: 40%;
}
in any case you can replace 768 with 1024 in case this does not work
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy