Changes to site on multi screens

  • Jo Shannon-little

    (@jo-shannon-little)


    11 years, 2 months ago

    Hi all

    First off, thank you so much for the fantastic theme you have released.
    I am very new to the world of site building and coding, but i have managed to build my site (I do use Custom CSS):

    I am happy with the main site bar one issue, loading speed of header images –
    1) Do I need to change the resolution to speed up loading?

    By biggest problem is viewing the site on mobile devices and tablets,
    Mobile –
    2) The main menu bar is collapsed, so menu items can’t be seen) and it moves when navigating the page, thus covering information on the page.
    3) I want to remove the logo in the menu bar for mobile and tablet
    4) The headings on different pages do not sit on one line when viewing on mobile – words are split across two lines.
    5) My Contact page is completely unformatted when viewed on any device except a computer.
    6) My social media icons fall off centre when viewing the site on ipad too.

    I know it probably seem very silly and completely naive, but just imagined it would work across all devices.

    Thank you in advance for your help with this.

Viewing 2 replies - 1 through 2 (of 2 total)
  • vladff

    (@vladff)

    11 years, 2 months ago

    Hi,

    The menu is collapsed on mobiles and toggable. You have to click it to open it up. Your header image is 5649 x 3708, you would need to resize it. Sorry, don’t have a lot of time at the moment to help more.

    Marko Dimitrijević

    (@dimikjones)

    11 years, 2 months ago

    Hi, you can use custom CSS mybe for few changes, I’ll explain.

    1. First comes first, 1920x1080px resolution is recommended so it covers whole screen on large devices. If you want better performance optimize it a little with for example Photoshop > Save for web or use online tools:
    http://www.resize-photos.com/
    https://compressor.io/

    2. Go to Appearance > Customize > Menu and clear two checkboxes, menu will be visible across whole page after that.

    3. I think setting smaller size for logo from Customizer will do the trick, but if you want to remove it on smaller screens use custom CSS:

    @media (max-width: 768px) {
    img.site-logo {
    display: none;
    }
}

    change valu for max-width as you like – it is screen widt

    4. and 5. It is normal feature of grid frameworks and on this theme Bootstrap is used.

    6. For your social icons and other sections on Fron Page use widgets with FP, like Moesia FP: Social Profile and it will be centered.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Changes to site on multi screens’ is closed to new replies.