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

Specular theme design issues in iPad landscape and portrait version

    • 6 years ago Richa
      Participant

      Hi,

      I have created the site “https://www.worldnetcapital1.com” using Specular theme. I have built the site using shortcodes that comes with the theme. But there are lot of design issues in iPad landscape and Portrait version. We have purchased the theme due to its features and responsive design but now lot of issues are appearing.

      I have checked the theme in responsinator.com. See below:

      1. https://www.responsinator.com/?url=https%3A%2F%2Fwww.worldnetcapital1.com%2Fsba-and-usda-loans%2F

      iPad portrait · width: 768px(table/footer)

      iPad landscape · width: 1024px (menus)

      2. https://www.responsinator.com/?url=https%3A%2F%2Fwww.worldnetcapital1.com%2Fcommercial-loans%2F

      iPad portrait · width: 768px, iPad landscape · width: 1024px
      (Right side buttons are blank, Learn more buttons are not aligned)

      Can you please solve the issue?

       

    • 6 years ago Richa
      Participant

      Can anybody reply on this urgently?

    • 6 years ago Ruco
      Keymaster
      This reply has been marked as private.
    • 6 years ago Richa
      Participant
      This reply has been marked as private.
    • 6 years ago Richa
      Participant
      This reply has been marked as private.
    • 6 years ago Richa
      Participant
      This reply has been marked as private.
    • 6 years ago Richa
      Participant
      This reply has been marked as private.
    • 6 years ago Richa
      Participant

      Any update on this?

    • 6 years ago Mirela
      Participant

      Hello,

      Sorry for the late reply.
      Please try adding this code:

      @media (max-width: 979px) and (min-width: 768px){
      .container{
      width: auto !important;
      }
      .list li.simple:first-child:last-child {
          width: 55%;
      }
      }

      Let us know.
      Best regards!

    • 6 years ago Richa
      Participant
      This reply has been marked as private.
    • 6 years ago Mirela
      Participant

      Hello,

      1-I added a custom css class to the column’s containing the lists. And i set up the empty middle column to be hidden in ipad and mobile. The i added these code to the ipad block code in the Custom Css:

      .vc_col-sm-4.contact_us.wpb_column.column_container {
          margin-left: 55px;
      }
      div.wpcf7 {
          margin: 45px !important;
      }
      .row > .span3 {
          padding-left: 0 !important;
          padding-right: 20px !important;
      }

      Result: https://ibb.co/1mDyTSB

      2-This alignment is due to the different length of the title above. To make them same line, you need to add a minimal height. I added it as custom css in the page’s custom css box. So it’s effective only in this page.
      Screenshot: https://ibb.co/CK2srs5

      3-Same here. I added a css only for this page.

      Please check your site.
      Best regards!

    • 6 years ago Richa
      Participant
      This reply has been marked as private.
    • 6 years ago Mirela
      Participant
      This reply has been marked as private.
    • 6 years ago Richa
      Participant
      This reply has been marked as private.
    • 6 years ago Richa
      Participant
      This reply has been marked as private.
    • 6 years ago Mirela
      Participant

      Hello,

      1-I don’t see overlapping, except for maybe more padding left. Add this css if that’s what you want:

      @media (max-width: 979px) and (min-width: 768px){
      .container {
          padding-left: 10px;
      }}

      Result: https://ibb.co/tD1qxbK
      2-I don’t see any overlapping except the minimum distance from header to content. For that add this:

      @media(max-width: 1024px){
      #content {
          padding-top: 120px;
      }}

      Result: https://ibb.co/2hKfSgK

      3-This is what i see: https://ibb.co/MkP6701
      The tables are in distance and not overlapping. To make them further bigger, just edit the values for the code suggested in previous replies.

      Regards!

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