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/retina issues

responsive
    • 8 years, 7 months ago bluestrawberry
      Participant

      Expired

      I’ve recently been working on a site which already had your theme installed and have come across a few issues when the site is displayed on phones/tablets.

      • The logo and menu don’t seem to line up with anything and drop off the background at certain sizes

      • The colour overlay on the page headers don’t work on retina devices

      • scroll buttons on the testimonial carousel don’t work on mobile (android)

      • The images on the “latest from blog” VC element should link to the story as well as the title
      also, the featured image in the news section crops at 390 px  and I can’t see where to change this

      • If the page has a long title the text in the header does not have a word wrap on so overflows off the edge

      Thanks

    • 8 years, 7 months ago bluestrawberry
      Participant

      Expired

      I managed to fix the header title by adding the following code into the custom code area

      .header_page h1{

      line-height:50px;
      padding-top:150px;

      }

      I still need an answer to the other issues. The most pressing being the featured images on the posts cropping. I can’t see a reason or where the size is coming from

    • 8 years, 7 months ago Kris
      Participant

      Hello,

      These issues can be fixed with some CSS. But we will need your site url for now, to give them a closer look. Add it on your profile user information. Please read this article for more information.

      Best regards!

    • 8 years, 7 months ago bluestrawberry
      Participant

      Expired

      Hi Kris, I’ve added my wp login details. Will get FTp details if you need them. Thanks

      • This reply was modified 8 years, 7 months ago by bluestrawberry.
    • 8 years, 7 months ago bluestrawberry
      Participant

      Expired

      Hi, still waiting for answers on this, need to get this site finished asap. We also have an issue where the page titles are not showing on thhe left side of the breadcrumbs on pages.

       

      Please get back to me as soon as you can

       

      Thanks

    • 8 years, 7 months ago bluestrawberry
      Participant

      Expired

      This reply has been marked as private.
    • 8 years, 7 months ago Mirela
      Participant

      Hello,

      I added this code into your custom css box:

      #logo img {  margin-top: 60px !important;}
      nav {
          height: 100%;
          padding-top: 0px !important;
      }
      .header_8 nav .menu>li>a {
          margin-top: -30px !important;
          height: 100px !important;
      }
      .header_tools {
          padding-top: 24px !important;
      }
      
      @media (max-width: 979px){
      #logo img {  top: 20% !important;}
      .header_tools {  height: 80% !important;}
      .header_tools {
          padding-top: 0 !important;
      }
      }
      @media (max-width: 1024px){
      header#header #navigation {  margin-top: -80px !important;}
      .header_tools {  height: 55% !important;}
      #logo {  margin-top: -60px !important;}
      .header_tools .vert_mid > a:last-child { margin-top: -36px;}
      }
      @media (max-width: 480px){
      #logo img {
          max-height: 85px !Important;
          margin-top: -14px !Important;
          margin-right: 55px !Important;
      }}

      This is the result: mobile screenshot; ipad; ipad landscape.
      Let us know.

      Best regards!

    • 8 years, 7 months ago bluestrawberry
      Participant

      Expired

      This reply has been marked as private.
    • 8 years, 7 months ago bluestrawberry
      Participant

      Expired

      Hi Everyone, There are still issues outstanding and it’s been 2 days since your last reply.

      • The logo and menu don’t seem to line up with anything and drop off the background at certain sizes – noticed this only happens when resizing the window. The top bar where the contact email and phone number appear needs to be hidden at the same break point as when the menu changes to the small screen version.

       

      • The colour overlay on the page headers don’t work on retina devices

       

      • scroll buttons on the testimonial carousel don’t work on mobile (android)

       

      • The images on the “latest from blog” VC element should link to the story as well as the title

       

      • page titles are not showing on the left side of the breadcrumbs on pages. (see links above)

    • 8 years, 7 months ago Mirela
      Participant

      Hello,

      1-The page header:
      This is caused by the custom css you have added. I commented out the padding in it and now the page title displays in all page’s breadcrumbs.

      2-I have added this css into yout custom css box:

      @media (max-width: 480px){
      #logo img {
         max-height: 80px !important;
          margin-top: -45px !important;
          padding-right: 50px !important;
      }}
      @media (max-width: 1024px){
      header#header #navigation {  margin-top: -80px !important;}
      .header_tools {  height: 55% !important;}
      #logo {  margin-top: -40px !important;}
      .header_tools .vert_mid > a:last-child { margin-top: -36px;}
      }
      @media (min-width: 1200px){
      nav {
          height: 100%;
          padding-top: 0px !important;
      }
      .header_8 nav .menu>li>a {
          margin-top: -30px !important;
          height: 100px !important;
      }
      .header_tools {
          padding-top: 24px !important;
      }
      }

      Please check your site. It is displaying ok now.

      2-I checked it and the color of the overlay on the page headers is indeed showing up without problem. Where are you accessing this? Can you please send a screenshot of it?

      3-You are right. We are looking into this and will notify you soon.

      4-By default only the title is set as link. To have the images too, i edited file vc_templates/latest_blog.php. I replaced this line:
      $output .= '<img src="'.esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port2', 'url')).'" alt="">';
      with this:
      $output .= '<a href="'.esc_attr(get_permalink()).'"><img src="'.esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port2', 'url')).'" alt=""></a>';

      -to change it’s image size please read this article: https://support.codeless.co/?ht_kb=ideal-image-size
      In you case you should change the “add_image_size( 'alternate_blog', 440, 195, true );” line.

      Let us know.

      Best regards!

Viewing 9 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