Support » Theme: Goran » Goran Theme Mobile View

  • Hello, just wondering if anyone could help. I have set up my website using the goran theme which works well on a desktop but when i look at it through a mobile the picture headers are too large and it does not look good. Just wondering if there is a way i can make it more compatible with mobile so that you can have a desktop view on the mobile that you zoom in to or do i have to change theme completely?

    Would be so grateful for any help!
    thank you so much!!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Hi @helenpr1

    Try reducing the height on smaller screens with some custom CSS.

    @media screen and (max-width: 768px) {
      .hero.with-featured-image {
        min-height: 400px;
      }
    }

    You can modify the min-height value as you like.

    Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated.

    An easy way to add custom CSS is to use the CSS editor included in the Customizer as of WordPress 4.7. Head to Appearance > Customize > Additional CSS to add your custom CSS.

    Hi @zoonini,
    So sorry for the late reply – have only just seen this.

    Thank you so so much for your help!! That has solved the problem! Im so grateful to you as I was thinking I was going to have to redo my whole website on a different theme to make it more compatible with mobile!

    Just wondered if you knew how i could change the picture header size in the same way so that they appear smaller on the desktop site?

    Thank you so much again!!!
    Helen

    and also the font size for the name of the pages? as they now appear too big compared to the header picture but im not sure how to reduce that?

    Also do you know how i can start a page so that I can add written articles to it? like a blog under one of the main menu headings?

    So sorry for all the questions, any help would be really appreciated!!

    Thank you
    Helen

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Just wondered if you knew how i could change the picture header size in the same way so that they appear smaller on the desktop site?

    If you want the the header height to be the same, no matter what size screen someone’s using, remove the media query from the CS I gave you earlier.

    In other words, replace this:

    @media screen and (max-width: 768px) {
      .hero.with-featured-image {
        min-height: 400px;
      }
    }

    with this instead:

    .hero.with-featured-image {
      min-height: 400px;
    }

    That changes the height no matter the screen size.

    I’ll reply to your other questions separately.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    and also the font size for the name of the pages? as they now appear too big compared to the header picture but im not sure how to reduce that?

    If you’d like to change the size of the page titles on pages with a header image, at any screen size, try something like:

    .hero .page-title {
      font-size: 30px;
    }

    You can adjust the font-size value as you like.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Also do you know how i can start a page so that I can add written articles to it? like a blog under one of the main menu headings?

    There’s only one blog per site, but if you want to group blog posts into categories, you could then link to those categories from your menu. You could also exclude posts from specific categories from appearing in your main blog, by using a plugin like https://wordpress.org/plugins/ultimate-category-excluder/

    If you need any further help with the Goran theme specifically, please feel free to start a new thread!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Goran Theme Mobile View’ is closed to new replies.