Responsive Design Problems with Tower Fullscreen Overlay

- 5 years, 11 months ago tmbaldwin
  Participant
  
  Expired
  
  Hello,
  
  I am using the fullscreen overlay template for a client’s website. It looks great on desktop and tablet landscape but the responsive design starts to completely break down on tablet portrait, mobile landscape, and mobile portrait.
  
  I’ve managed to correct most of the issues by changing the front end CSS using the Visual Composer; however, there are two outstanding problems I can’t seem to fix.
  
  1. Logo and menu position on the individual portfolio pages
  
  These can’t be accessed using visual composer (I’m using the Codeless portfolio template). The changes I made in the Visual Composer to adjust the headers on the other pages were:
  
  @media (max-width: 797px) {
  #logo img.dark {
  display:block;
  visibility: visible;
  }
  
  #logo img.light {
  display:none;
  visibility: hidden;
  }
  
  #logo {
  left: initial;
  }
  
  .fullwidth_header .header_wrapper header {
  padding-left: 70px;
  padding-right: 20px;
  }
  
  @media (max-width: 480px) {
  
  #logo {
  float: left;
  }
  
  .fullwidth_header .header_wrapper header {
  padding-left: 10px;
  padding-right: 10px;
  }
  
  .header_5 .header_tools {
  display: table;
  float: right;
  }
  
  I’ve tried variations on this in the CSS editor but doesn’t seem to be working. Suggestions?
  
  2. Content position on homepage sliders for mobile view
  
  On the mobile version, the slide content and the navigation buttons overlap. I’ve tried to alter the position of the content to move it higher and/or the navigation lower. Unfortunately I can’t seem to find a fix. Suggestions here would be welcome as well.
  
  The website is aquahomesdevelopment.com
  
  Thanks!
- 5 years, 11 months ago Mirela
  Participant
  Hello.
  
  1-I checked your site in mobile (both landscape and portrait), the logo and menu seem ok. Please see the screenshots: mobile-portrait; mobile-menu-portreit; mobile-landsc; mobile-menu-landsc; tablet;
  Can you please explain better what the issue is?
  
  2-Please add this code into yoru custom css box:
  
  @media (max-width: 767px) { .codeless_slider .nav-roundslide a.prev { top: 275px;} .codeless_slider .nav-roundslide a.next { top: 275px;} }
  
  Edit the values to your wish. Let us know.
  
  Best regards!
- 5 years, 11 months ago tmbaldwin
  Participant
  
  Expired
  
  Hi,
  
  Sure. Specifically, the position of the logo and menu are only a problem on the individual portfolio pages. For example:
  
  aquahomesdevelopment.com/codeless_portfolio/basement-suite-renovation
  
  I think the same code would work for these pages. Unfortunately there’s no option to edit these pages with Visual Composer, and I can’t figure out how to grab them specifically in the general WordPress CSS editor.
  
  Also, regarding the code you provided for moving the “Previous” and “Next” arrows, this works great. Is there a similar line of code you can suggest for moving the Codeless Slider content? My client would prefer text on top and navigation on bottom if possible.
  
  Thanks!
- 5 years, 10 months ago Mirela
  Participant
  Hello,
  
  1-To change the position of mobile menu please add this code into your custom css box:
  
  @media (max-width: 767px) { .header_5 .open_full_menu { margin-left: -45px !important;} #logo img { margin-right: -11px !important;} }
  
  The first line is to change the position of menu, while the second line is to edit the position of logo in mobile. Edit the values to your wish (you can set both positive and negative values).
  
  2-To change the position of slider content and prev-next arrow, edit the previous code i gave you to this:
  
  @media (max-width: 767px) { .codeless_slider .nav-roundslide a.prev { top: 275px;} .codeless_slider .nav-roundslide a.next { top: 275px;} .codeless_slider .swiper-slide .content { margin-top: -45px !important;} }
  
  Edit the values to your wish.
  
  Best regards!
- 5 years, 10 months ago Mirela
  Participant
  Note: To make the css code affect only portfolio item’s pages, check the page’s id via inspect element (press F12 key to open inspect element). Go at the top of page’s content code and find the page’s id (screenshot). Add this id in the beginning of the code. Example:
  
  @media (max-width: 767px) { .single-portfolio .header_5 .open_full_menu { margin-left: -45px !important;} .single-portfolio #logo img { margin-right: -11px !important;} }
  
  This code will now change only the single portfolio pages.
  
  Best regards!
  
  This reply was modified 5 years, 10 months ago by Mirela.
- 5 years, 10 months ago tmbaldwin
  Participant
  
  Expired
  
  Thanks Mihaila. I will do this today and let you know how it goes.

Viewing 5 reply threads

You must be logged in to reply to this topic.

Community Forums

Responsive Design Problems with Tower Fullscreen Overlay

Site Links

Useful Articles

Login