Text on Codeless Slider too small on mobile

#codeless slider #responsive #mobile

- 5 years, 9 months ago hellobabs
  Participant
  
  My titles and subtitles on the codeless sliders are very small when viewed on a mobile device. How can I fix this so they are more porportional?
  
  http://www.meandgrace.com
- 5 years, 9 months ago Mirela
  Participant
  Hello,
  
  You can use custom css. Add this code:
  
  @media (max-width: 480px){ .codeless_slider .swiper-slide .content p { font-size: 22px !important; } }
  
  Let us know.
  Best regards!
- 5 years, 9 months ago hellobabs
  Participant
  
  I pasted that in the “Additional CSS” section, but it didn’t work. Currently my custom CSS looks like this (the first CSS was to fix the menu from overlapping the logo on mobile devices:
  
  @media (max-width: 480px){
  #logo {
  width: 90% !important;
  }}
  
  @media (max-width: 480px){
  .codeless_slider .swiper-slide .content p {
  font-size: 22px !important;
  }
  }
- 5 years, 9 months ago Mirela
  Participant
  Hello,
  
  The css should be added in theme’s Custom Css box, located in Tower > General Options > Custom Css box. Edit the code to this:
  
  @media (max-width: 480px){ #logo { width: 90% !important; } .codeless_slider .swiper-slide .content p { font-size: 22px !important; } }
  
  Let us know.
  
  Best regards!
- 5 years, 9 months ago hellobabs
  Participant
  
  If I eliminate the #logo code, then my .codeless_slider looks great (when I replace p with h5 or h6). However, then the menu and my logo (which is partially off-screen) overlap. When I include the #logo code, nothing changes with the .codeless_slider.
- 5 years, 9 months ago Mirela
  Participant
  
  Hello,
  
  I am not sure what you are ttrying to do now. But you can change the logo width value until you are satisfied with the result. Also, add some margin-left/margin-right to position it to your wish.
  
  Best regards!
- 5 years, 9 months ago hellobabs
  Participant
  
  Everything looks good on my phone, except that the logo and the mobile menu are overlapping. Changing the logo width value or adding margins isn’t changing anything. Is there any way to move the mobile menu below the logo? Centered?
- 5 years, 9 months ago Mirela
  Participant
  Hello,
  Add this css too, inside the @media (max-width: 480px){ block:
  
  #logo { max-width: 60% !important; } .header_11 #logo { margin-right: 6 !important; } .mobile_small_menu { margin-left: -20px !important; }
  
  Result: https://ibb.co/WPTSK0n
  
  Best regards!
- 5 years, 9 months ago hellobabs
  Participant
- 5 years, 9 months ago hellobabs
  Participant
  
  The screenshot is from an Android device after I added the code. It’s getting better. Before the code the logo was left aligned and the “m” in “me” was not seen.
- 5 years, 9 months ago Mirela
  Participant
  
  Hello,
  
  Just change the values until you are satisfied with the result.
  
  Best regards!
- 5 years, 9 months ago hellobabs
  Participant
  
  Got it! I changed the logo width to 50% and the right margin to 4. Thanks for all your patience!!!!
- 5 years, 9 months ago Mirela
  Participant
  
  You’re welcome!
  If you like our theme, please leave a rating on Themeforest.
  It’s important for us:
  https://themeforest.net/downloads
  
  Thank You!

Viewing 12 reply threads

You must be logged in to reply to this topic.

Community Forums

Text on Codeless Slider too small on mobile

Site Links

Useful Articles

Login