Table appears differently on desktop vs. mobile

  • Author
    Posts
  • #114456

    abbeyragsdale
    Member
    Original poster

    I used a tables on our Press page so that I could link photos individually to the respective articles. I want the tables to appear with no border, which I seem to have done successfully on the desktop version of our site, but not on the mobile version–and some of the photos get skewed.

    Here’s the specific page I need help with: https://smithandragsdale.com/about/press-2/

    What can I do to fix this issue?

    The blog I need help with is: smithandragsdale.com

    #114613

    tarasdashkevych
    Theme Author

    Hello,

    Theme add a responsive functionality to the tables in the mobile view.

    I would recommend you to use the theme’s grid instead of table.

    Here is an example:

    <div class="row">
    
    <div class="col-lg-3 col-md-3">
    First Column
    </div>
    
    <div class="col-lg-3 col-md-3">
    Second Column
    </div>
    
    <div class="col-lg-3 col-md-3">
    Third Column
    </div>
    
    <div class="col-lg-3 col-md-3">
    Fourth Column
    </div>
    
    </div>

    Please let me know if you have any other questions.

    Thank you,
    Taras

    #114615

    abbeyragsdale
    Member
    Original poster

    Thank you so much, Taras. That did exactly what I was trying to achieve with the table. I appreciate your quick reply.

    On another note, I added some custom CSS to eliminate the header image on each page. Is there a way for me to eliminate the grey color that has taken the place of the Featured Image at the top of the following pages?

    https://smithandragsdale.com/about/design-team/
    https://smithandragsdale.com/about/awards/
    https://smithandragsdale.com/about/press-2/

    #114645

    tarasdashkevych
    Theme Author

    Not a problem :)

    It looks like you’ve used a custom CSS for the Full-Width template. So, to change the background color of the header section for the Full-Width template, please use this custom CSS:

    .page-template-full-width-page #primary-header {
       text-shadow: none;
       background: #ffffff;
    }
    
    .page-template-full-width-page #primary-header .entry-title {
       color: #000000;
    }
    
    .page-template-full-width-page #primary-header.has-background-cover .overlay {
       opacity: 0;
    }

    Hope this helps.

    Thanks,
    Taras

The topic ‘Table appears differently on desktop vs. mobile’ is closed to new replies.