Goran Theme Mobile View

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

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.

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.

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://www.ads-software.com/plugins/ultimate-category-excluder/

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