Take your website
To the next level
Discover our newly launched customization services and elevate your web projects to new heights.
Delegate tasks, save time, and unlock the power of professional WordPress outsourcing.

Okay
  Public Ticket #1274868
Mobile Viewing
Closed

Comments

  • Morgan started the conversation

    Hello, 

    I have finished creating my site but when I viewed it on mobile, it's very off. I have large gaps of space and things are not placed correctly. 

    + Now, I'm getting large gaps of space on my desktop view as well. 

    Is there a way to put my menu as a horizontal header with just colored text, no box around each menu item?

  •  4,803
    Michael replied

    Hi,

    Please share admin access. We will try to inspect problem on your site.

  •   Morgan replied privately
  •  4,803
    Michael replied

    In the settings of the row you have enabled the setting of the Full height.
    Select and set the menu that you need, and after that we will change the look of your choice.

  • Morgan replied

    Ok, I have set the menu that I want. Are you able to remove the space where the logo would normally be that's in the middle of the menu? I would like just my menu tabs at the top, no logo image. 


    I have unmarked "full height" but my page still has white gaps. I would like for my site to have a uniform white background throughout. I've tried changing my column and row color but the background color remains grey for everything below my slideshow. 


    When I view the mobile version, everything is disproportionate, the text is too large, my slideshow is missing and my home page image is off center. 



  •  4,803
    Michael replied

    Show on the screenshots that it does not suit you in the mobile version.

  • Morgan replied

    I see two different versions for mobile. 

    One is viewing it from the "AMP" tab under the Appearance section. This version has everything oversized or undersized, the buttons are too big and not centered. The trainers pictures are blown up. 

    The other version is viewing it from my phone, through the WordPress app and clicking on viewing the Chisel Homepage page. This version shows me practically nothing... The first image I have uploaded shows this. 

  • Morgan replied

    More screenshots.

  • Morgan replied

    and the final screenshots

  •  4,803
    Michael replied

    About the first screenshot. We do not know what it is. Perhaps you have included some kind of plugin that blocks the work of the site on mobile devices.

  • Morgan replied

    Ok...

    so what about the rest of the screenshots I sent? Why is it not formatting correctly? 

  • Morgan replied

    I turned off my "coming soon" plugin to view the site live from my phone- the first time around it pulled up the site. It is still out of proportion and off centered. So I turned the "coming soon" plugin back on and made a few text size changes. I turned the coming soon plugin off again and now, my site does not pull up like it did before. It pulls up like the first screenshot I had sent previously. I've included the latest screenshot here. 

    I haven't installed any plugins except for the Coming Soon Pro plugin. 

    I'm not sure what is keeping my site from looking great on mobile view but it's very important to me that the mobile version look just as great as the desktop view. 

  •  4,803
    Michael replied

    Let's deal in parts. The Jetpak plugin for redirecting to this page on mobile devices.

    I need to know if you created this site?
    I see that for the top block many styles for mobile devices are registered. On mobile phones, the contents of the device are at the bottom. You have included in the settings the entire height of the block. If the settings set the content at the top of this line, then the site looks great on mobile devices. You just need to add the necessary indentation.
    All other large indentations on mobile devices are due to the fact that you added them for the desktop version of the site, for mobile phones they are not automatically deleted, you need to do it yourself using custom CSS


  • Morgan replied

    You need to know if I created this site as in Chisel Homepage? Or? 

    I have created this site using The Gem layout theme. 

    I do not know how to do custom css to fix the mobile view. Is that something you can help me with? I've attached more screenshots from the mobile view. 


    IMG_1716: The background image of the girl is too enlarged and off centered. The two buttons "personal training" and "small group classes" should be 2 separate buttons.

    IMG_1717: The slideshow of images is missing. 

    IMG_1718: Still too much space between text blocks 

    IMG_1720: "contact us" is not centered 


  • Morgan replied

    IMG_1721: too much blank space. body of text is off centered. 

    IMG_1722: too much blank space

    IMG_1724: Trainers names should go after their images. too much blank space 

    IMG_1725: Images are not proportionate. the 4th image down of the man with the beard came out right and is what I would like for mobile. 

  •  4,803
    Michael replied

    1 page:

    The background in the header of the site is located as you set in the background settings, there will be no other location on the mobile devices.
    The block with the slider was hidden on the mobile at the construction sites, tk. Poorly displayed on mobile devices, pictures are too big for this. The rest is checked, we did as you wanted.



  •  4,803
    Michael replied

    2 page:

    Block with trainers in any case, you can not fix, blocks go from left to right, and in the mobile version also follow one after another, therefore the order can not be changed.
    I can only suggest deleting blocks with names on mobile devices.
    In occasion of images of trainers. Images are cropped in the center by default, if you want, you can slightly move the image, specify which images do not suit you.


  • Morgan replied

    Thank you for all of your edits to the site. They are greatly appreciated. 


    Could you please: 

    make menu text thin like the button text 

    remove gap between bottom button (complimentary session) and the top two buttons (personal training and small group classes)


  •  4,803
    Michael replied

    pls. use following css:

    .header-block .gem-button {
        margin-bottom:0px !important;
        margin-top:0px !important;
    }