Mobile full screen overlay

- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  When I open my website on mobile there is a white field on the bottom and also top of the page when image is supposed to be full screen with logo overlaid
  
  appreciate if you could help
  
  thanks
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  This reply has been marked as private.
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  This reply has been marked as private.
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  I might just mention that apparently issue occurred after I applied the code you suggested earlier to make top widget area transparent and overlay
  
  .header_5 .top_nav { z-index: 2 !important;}
  
  .top_nav { background-color: rgba(255, 255, 255, 0) !important;}
  
  .top_wrapper { margin-top: -33px !important;}
- 9 years, 4 months ago Mirela
  Participant
  Hello,
  
  Please add this code for the responsive layout:
  
  @media (max-width: 480px) { .top_wrapper { margin-top: 0px !important; }}
  
  Let us know.
  
  Best regards!
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  Hi there, issue has been fixed on mobile, however not on desktop as per my comment above.
  
  Header is no longer transparent and there is white space after the footer. Not sure how to fix this
  
  https://serenitytravelphotography.com/discoveraustralia/
  
  Thanks
- 9 years, 4 months ago Mirela
  Participant
  
  Hello,
  
  Sorry there was a misunderstanding, i gave you the code for this site: https://serenitytravelphotography.com/
  
  Please send us the login credentials of the other site, so we can give it a closer look and test out all screen resolutions.
  
  Best regards!
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  Just updated details. Thank you
  
  Mobile works well. and home page with revolution slider. Any new pages don’t have same look and I can’t seem to change it, why I added a link to a sample page
- 9 years, 4 months ago Mirela
  Participant
  Hello,
  
  That’s because in home page you have a Revolution slider and the css i gave modified it. in other pages you do not have the same elements so the result won’t be the same. However i added this code into your custom css box:
  
  .page .top_wrapper { margin-top: -120px !important; } .page #content { padding-top: 100px !important;}
  
  Please check your other pages. They are just like the home page now (the one’s with content! You have to add content to all of them in order to see the result).
  
  Best regards!
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  Thanks for looking into this. I have looked and problem on other pages disappeared. However on the first page now there is white space on the bottom and on mobile version everything including header has moved up and is now cut. appreciate if you could have a look
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  Forgot to mention that on mobile version on other pages there is still white background instead of header and not full screen image
- 9 years, 4 months ago Mirela
  Participant
  Hello,
  
  I added this css for the pages:
  
  @media (max-width: 979px){ .header_wrapper { background: rgba(255, 255, 255, 0) !important; }}
  
  Please check your site.
  What do you mean by “the content is 1/4 of the original”? I don’t see it anywhere (screenshot).
  let usknow.
  
  Best regards!
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  content moved up and logo and menu are no longer visible. also large white space at the bottom
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  https://pho.to/AIlVz Link to the image
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  On desktop version everything is fine except white space at the bottom. might just be layout setting as I now set it to 1924×1024 and my screen has more than that. On screens with 1924×1024 looks fine https://pho.to/AIlWX
- 9 years, 4 months ago Mirela
  Participant
  Hello,
  
  I editet code in your custom css box. I removed these two lines from it:
  
  .home .top_wrapper { margin-top: -30px !important; }
  
  .. and added them into the home page’s custom css box. Also since the other pages need different css, added this code into the “Discover Australia” page’s custom css box (screenshot). Please add this at every page you will be using.
  
  Note:
  Please update theme so we can continue checking this. It is very old and some of the issues may come from it.
  
  Let us know.
  
  Best regards!
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  Thanks for looking into this guys. I have checked website and it works great. Thanks for that.
  
  On mobile version front page issue improved but still top part of the screen is a bit cut (top of the logo) and there is a bit of white space at the bottom.
  
  I would like to upgrade the theme but not sure how. When I go to my themes Specular doesn’t seem to have updates. It has been installed by an IT guy, so I can’t access tools that they used for install. Would you suggest anything to update it? Thanks
- 9 years, 4 months ago Mirela
  Participant
  
  Hello,
  
  Please read theme documentation for instructions on how to update theme. You have it included in your main folder (the one you dowloaded from Envato). Or just read the online version.
  Link: https://codeless.co/documentation/main.html#update_theme
  
  Best regards!
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  The issue is still on mobile on the home page. I have identified where the problem is.
  
  Custom css for the home page is
  
  .page .top_wrapper {
  
  margin-top: -30px !important;
  
  }
  
  when I completely remove it, home page on mobile looks perfect but on desktop is not correct (background is not full screen and there is white stripe behind top widgetesed area.
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  could you please provide css code for the home page that would fix mobile issue?
  
  Also I tried updating theme, however when I install it via downloaded zip file, error comes up at the end “style.css file not found”. What should I do?
  
  Thanks
- 9 years, 4 months ago Kris
  Participant
  
  Hello,
  
  You should update theme and visual composer first. If you get this error, please refer to this article.
  Let us know if the issue persist even after update.
  
  Best regards!
- 9 years, 4 months ago pixie5
  Participant
  
  Expired
  
  Hello, thanks for the tip. I have been able to update theme to the new version.
  
  Issue with mobile home page still remains. Content slightly moved to the top resulting for logo to be cropped and white space at the bottom of the slide. Also text from revolution slider (first slide) doesn’t seem to show properly within the window
  
  thanks
- 9 years, 4 months ago Kris
  Participant
  Hello,
  
  Please check your site on mobile view now, we fixed it.
  Added this code to your homepage CSS box:
  
  .page .top_wrapper { margin-top: -30px !important; } @media (max-width: 480px){ .page .top_wrapper{ margin-top: 0 !important; } }
  
  Let us know.
  
  Best regards!
- 9 years, 3 months ago pixie5
  Participant
  
  Expired
  
  worked out well. thanks a lot for your help

Viewing 23 reply threads

You must be logged in to reply to this topic.

Community Forums

Site Links

Useful Articles

Login