Hi Rikard,

Yes it works. One more question, what’s the best way to bring the top-right ‘Login | Register’ links closer to the left?

Hi Jordan,

Solved! Close topic!

Thank you,

Jas

• This reply was modified 8 years, 10 months ago by Jasmer.

Perfect. This is what I used. But I asked a question above I’d like understand

“Why does the Enfold theme not center these automatically? I’d like to know if there is something I can do differently, because I don’t want to center the fields via CSS on different devices every time I build a website.”

Do I need to use a different element? This element should renderr correctly without custom CSS.

@media only screen and (max-width: 767px)  {
.page-id-18 .avia-builder-el-2{
padding:25px!important;
padding-top:45px!important;
}}

Thank you so much for your help,

Jas

Hi Yigit,

I need one thing, to make the all the landscape images on my site to be full frame with no giant white space below the image. (See screenshot in Private Content below) I do not to replace the images. It takes forever to find excellent images. There has to be way as this has been successful on other sites.

This is not just about one image. I need others adjusted. Please look at the other images listed below (in Private Content) to see what I am talking about. This is more than a width problem. People’s heads are cut off, all the people don’t fit in the photo, etc.

Perhaps we also need to use CSS to resize the height of the Color Section or use a different element. This is a problem on almost all of my sites. I would like to find a permanent solution for this so I don’t have to bother you guys with this problem on every site.

Thank you so much for your help Yigit.

As I mentioned this CSS below, worked to some degree, but still with problems. I put the CSS back on the site so you can see the problem when you go to the site on your mobile device. The CSS below worked for another site with the similar image dimensions. (See Private Content below for the other site.)

@media only screen and (max-width: 767px) {
#home-slider-image .av-parallax-inner.main_color.avia-full-stretch {
    position: relative;
    top: -200px;
    background-size: contain !important;
}} /*home slider image + uncrop width*/

@media only screen and (max-width: 480px) {
#home-slider-image {
    background-position: 50% 0%!important;
    background-attachment: scroll!important;
}}

• This reply was modified 8 years, 10 months ago by Jasmer.

Hi Basilis,
thanks a lot. This was great help! It works just perfect. You can close this thread.
Just wanted to share for others how I changed the CSS code (thanks to you link):

#top label {
margin-top: -15px;
margin-bottom: 0px;
}
#top .avia_ajax_form .text_input, #top .avia_ajax_form .select {
padding: 8px;
}
@media screen and (min-width:480px) {
#top .avia_ajax_form input[type=”checkbox”] {
top: -12px!important;
}
}

Best regards,
Bernd

ah, sorry, should have written it here. Thanks.

I made a workaround and replaced the variable topbar_height in avia.js with a global variable and manipulated it in another script.
Thanks for returning.

Thanks Jordan! You can close this topic.

Hi Jordan,

Yes that is good. But I’d like to increase the top of the overlay by 20px as well.

I wasn’t everything to stay the same, but I want the white overlay to be taller at the top by 20px. Can you help with that?

THANK YOU,

Jas