Color section with background image don't cover the entire container on mobile - Support

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
March 16, 2022 at 12:27 pm #1344729

madakumbu
Participant

Hello!!
I am using a color section witht a background image on the top of content area

It seems to show ok on computer screen but it show not good on mobile screen.
The vertical space asigned on the mobile screen is ok but in the landscape orientation the image covers a small part and the rest is just blank space on top of the content area

I have set the “Background Repeat” settings to “Stretch to cover” and it continues the same, it does not cover the entire container.

Please check it both on computer and mobile screens, I am sending you two screenshots on private.

I also include admin login, so you can investigate

Thanks a lot

March 17, 2022 at 10:17 am #1344834

madakumbu
Participant

Hi, have you been able to see some solution to my problem?
Thanks a lot !

March 17, 2022 at 1:35 pm #1344875

Ismael
Moderator

Hi,

Thank you for the inquiry.

The background image seems to be resizing correctly on our end as shown in the screenshot in the private field. Please make sure to purge the cache before testing the page. If the issue persists, try to upload a larger image or try to disable the parallax effect temporarily.

Best regards,
Ismael

March 17, 2022 at 2:17 pm #1344898

madakumbu
Participant

Thanks a lot for the answer!

But it does not work.
The issue persists; It seems to be a problem with the space.

I have tried with a simple colour background, without any image nor effect.

I send you in private content the mobile screenshots (vertical and landscape positions)

March 18, 2022 at 4:17 am #1344995
Ismael
Moderator
Hi,

Thank you for the screenshot.

We can reproduce the issue when the screen width is less than 900px and it is due to this css.
```
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 205px;
}
```
Did you add it somewhere? To override the custom css, please add this css code.
```
@media only screen and (max-width: 989px) {

  /* Add your Mobile Styles here */
  .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 119px !important;
  }
}
```
Best regards,
Ismael
March 18, 2022 at 9:01 am #1345016

madakumbu
Participant

Thanks for your answer
First css you have sent, I have not added anywhere

And with the second css yo send, the issue is backwards: Now the space is in the vertical position. (I send screenshots)

However, some days ago, Mike (moderator) added this css in order to fix another issue I had:

@media only screen and (max-width: 900px) and (orientation: landscape) {
.html_header_top.html_header_sticky #top #header {
position: absolute;
}
.responsive .logo img, .responsive .logo svg {
height: auto !important;
width: auto;
max-width: 100%;
display: block;
max-height: 80px;
}
#top #header_main > .container,#top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a, #top #header_main #menu-item-shop .cart_dropdown_link {
height: 80px!important;
line-height: 80px!important;
}
.responsive #top .av-main-nav .menu-item-avia-special {
display: block!important;
}
.responsive #top .av-main-nav .menu-item:not(.menu-item-search-dropdown) {
display: none!important;
}
}

Have I to make some modification to this css?

I send yo new screenshots on private. Also password to the site.
Thanks again

March 18, 2022 at 2:03 pm #1345084

Ismael
Moderator

Hi,

Thank you for the info.

We edited the css in the Quick CSS field a bit. It should now work correctly both on tablet and phone view. Please make sure to purge the cache before testing the page.

Best regards,
Ismael

March 18, 2022 at 2:32 pm #1345088

madakumbu
Participant

THANKS A LOT ISMAEL !!
Now it is ok….
BUT , SORRY so much ,… with this fix, now there is a new issue:
Transparent headers do not work
I send you two examples with shortcodes: Mobile landscape positions and those ok in the computer

Thanks again !

March 18, 2022 at 3:01 pm #1345095

madakumbu
Participant

hi Ismael

I send also two shortcodes whith the LANDING PAGE, one is view on COMPUTER, the other is view on landscape mobile position
You can see the transparent mode does not work on mobile

Before the last fix , all this worked correctly

Thank you very much for your help !

March 19, 2022 at 8:59 pm #1345213
Mike
Moderator
Hi,
For mobile landscape I added this css:
```
@media only screen and (max-width: 990px) and (orientation: landscape) { 
  .responsive #top #main {margin-top: -80px!important;}
  #top #wrap_all .av_header_transparency {background-color: transparent!important;}
  div#header_main > .container {display: block !important;}
  }
```
Please clear your browser cache and check.

Best regards,
Mike
March 20, 2022 at 10:56 pm #1345301

madakumbu
Participant

Hi Mike !

Thanks a lot for your help!
There is still something wrong. I send you some screenshots.

These are the errors:
1- TOP BAR do not appear when transparent header (mobile landscape position)
2- TITTLES go under header in pages with no transparency (mobile landscape position)

Thanks again for all !!

March 20, 2022 at 11:57 pm #1345304

Mike
Moderator

Hi,
Thanks for the feedback, I believe I sorted this out, please clear your browser cache and check.

Best regards,
Mike

March 21, 2022 at 11:22 am #1345332

madakumbu
Participant

Hi Mike !
Many thanks for your help.
Issues solved, everything works fine now, you can close this thread.
Highly appreciated for your service.
Best regards,
Magdalena

March 21, 2022 at 12:58 pm #1345336

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Color section with background image don't cover the entire container on mobile’ is closed to new replies.