Okay
  Public Ticket #2119573
mobile website optimizations
Closed

Comments

  • itsabusamra started the conversation

    1. My first issue is with the slideshow, the font is so big on mobile it doesn't align correctly with my images. https://ibb.co/bmcpNjg

    2. My second issue is with the GPS logo list, it's not centered and looks weird. https://ibb.co/kxkHkDy

    3. My third issue is with the footer, I want to center all of this text and the social icons. https://ibb.co/Xt2M9Mj

  •  231
    Shopify Team replied

    Hi itsabusamra,

    1. About your first issue, you can upload images for mobile. Please follow these steps to fix it:

    - Go to Admin - Online Store  - Theme - Customize

    9456874576.png

    - Open section GPS Slideshow - Slide - Mobile image

    9678761092.png

    - Choose image you want to show on mobile

    1296783116.png

    - Click Save to save the updates then check on frontend.

    2. Please follow these steps to fix the GPS logo list issue: 

    - Go to Admin - Online Store  - Theme - Actions - Edit code 

    4816853911.png

    - Open file from this path: Assets - gps-homepage.scss.liquid

    3397740443.png

    - Scroll to line 1485, you can see this piece of code

    7242052510.png

    - Delete this code marked

    4963373103.png

    - Click Save to save the updates then check on frontend.

    3. please follow these steps to centered all of text and the social 

    - Go to Admin - Online Store  - Theme - Actions - Edit code 

    - Open file from this path: Assets - gps-header-footer.scss.liquid

    1708740770.png

    - Scroll the end of file and add this code like image below

    9730561363.png

    - Here's the code piece:

    @media (max-width: 767px) {
      .site-footer{
        .middle-footer{
          .col-12.gp-footer-block{
            .text-wrapper{
              text-align: center !important;
            }
            &> *{
              justify-content: center !important;
              
            }
            .text-column-with-image-wrapper {
              text-align: center!important;
              .image-wrapper img {
                margin: 0 auto;
              }
            }
            .vertical-link-list-wrapper {
              text-align: center!important;
            }
            .newsletter-wrapper {
              .content {
                text-align: center!important;
              }
              .footer-socials-wrapper, form {
                justify-content: center!important;
              }
            }
            .horizontal-link-list-wrapper {
              .title-content {
                text-align: center;
              }
              ul {
                jusity-content: center!important;
              }
            }
          }
        }
      }
    }
    

    - Save to save the updates then check on frontend

    Be Steven

    Best regards