Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Responsive Design Problems with Tower Fullscreen Overlay

codeles slidermobile menuportfolioresponsiveslider
    • 8 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!

    • 8 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!

    • 8 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!

    • 8 years, 11 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!

    • 8 years, 11 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 8 years, 11 months ago by Mirela.
    • 8 years, 11 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.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password