Responsive theme not working for certain elements.

- 6 years ago danial-kleidon
  Participant
  
  Hello Codeless,
  
  I really love the Tower theme, it has been intuitive to use. With that said, I have run into some issues that put me at a loss and I’m hoping you may have some answers to what I’m missing on my end.
  
  There are certain elements on my site that are not working via responsive design for mobile devices, items that should be center-aligned, or in the case of the codeless slider, adding an additional height filled in with a dark gray background. https://geopfert.kleidoscopemarketing.com/#
  
  Any help would be appreciated!
- 6 years ago Ruco
  Keymaster
  
  Hello,
  
  Please try to add this line into Tower > General > Custom Css :
  
  .services_medium.style_2{float:none !important;}
  
  I have tried other element on iPhone and are center aligned.
  
  Let us know.
  
  Regards!
- 6 years ago danial-kleidon
  Participant
  
  Ruco,
  
  Thank you so much! That solved the issue for center alignment.
  
  For mobile devices, is there a way to edit the drop down navigation to be full-width? When you check the site on a mobile device and click the hamburger icon, the navigation will drop down, but it’s contained on the sides. Is there an easy way to make the background color extend fully, while leaving the logo and hamburger icon background white? Essentially, it would be two containers instead of one.
  
  Wanted to inquire before messing with any code. Thanks again!
- 6 years ago Ruco
  Keymaster
  Hello,
  
  Yes you can do that by adding the following css into Custom Code:
  
  header > span12 { width: 334px !important; } .fullwidth_header .header_wrapper header{ padding-left:0px !important; padding-right:0px !important;}
  
  Regards!
- 6 years ago danial-kleidon
  Participant
  
  Thank you again for your courteous and quick responses! There are three things I’d like to inquire about.
  
  1. for responsive viewing on an iPad, the site seems to lose its padding, causing content to bleed off the screen (this doesn’t happen on mobile phones). What would the best way be to fix this?
  
  2. Responsive navigation question, when the screen size condenses, the navigation line will break below before eventually becoming the hamburger icon. Is there a way I can set the header width size so that the navigation becomes the hamburger icon before it breaks?
  
  3. Small detail, but my site is set for smoothless page transition. Every now and then a green loading icon appears (briefly), is it possible to change the color using CSS?
  
  Again, thank you so much for all your help, I’m grateful!
- 6 years ago Ruco
  Keymaster
  Hello,
  
  You need to add the following css in the Tower > Custom Css Box :
  
  @media(max-width:1024px){ header#header #navigation{display:none} .mobile_small_menu{display:block; left:50%;} .container{max-width: 961px !important;} }
  
  You can change the loading image by change the css :
  
  .animsition-loading{
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: url(oval.svg) center center no-repeat;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  in the file below:
  https://geopfert.kleidoscopemarketing.com/wp-content/themes/tower/css/animsition.min.css?ver=4.9.8
  
  The loading image is oval.svg that need to be changed.
  
  Let us know.
  
  Best Regards!
- 6 years ago danial-kleidon
  Participant
  
  I’m using the simple navigation style. Is there a CSS code I can implement that would break the main navigation into two lines when the screen size condenses? Right now, the navigation will break below the navigation header before going into it’s default mobile navigation.
  
  The attached image should provide clarity for what I mean. I’m grateful for all the help, thank you!
- 6 years ago Ruco
  Keymaster
  Hello,
  
  There is two possibilities:
  
  1. You have to make the font-size smaller and you don’t have any problem.
  
  2. Another option is to transform the menu into a responsive one:
  
  @media(min-width:768px and max-width:1100px){ header#header #navigation{display:none;} .mobile_small_menu{display:block !important;} }
  
  let us know.
  
  Regards!
- 6 years ago danial-kleidon
  Participant
  
  Thank you so much for all your help, I’m grateful!
- 6 years ago danial-kleidon
  Participant
  
  My apologizes, one last question.
  
  For the codeless slider, I’ve set an image to replace the video on mobile phone devices. Is there an option that would allow the image to replace the video on tablets too, and only showing the video on desktops?
  
  Thanks!
- 6 years ago danial-kleidon
  Participant
  
  Never mind, I figured it out. Thanks for the previous help!