Goran Image Size

  • Resolved dlojek

    (@dlojek)


    10 years ago

    Hello – I am new to wordpress doing my first site. I am using the Goran Theme. I have a nice header with a logo and the menu on the top. Below that is the Header Image.

    Is there a way to reduce the size of this image? The Home Page is nice but when you go to any of the other pages you see nothing but the same large image (with the page title). Unless you know to scroll down you would not know there is any content

    I have tried editing the CSS to no avail and searched the forums which seem to reference this but have not seen a solution.

    Thanks in Advance

Viewing 11 replies - 1 through 11 (of 11 total)
  • bernbe01

    (@bernbe01)

    want to link me to your site and i’ll try and help? there isn’t a one size fits all here unfortunately

    also, please read this thread

    Thread Starter dlojek

    (@dlojek)

    I read that and they did not seem to work

    here is the site: drledtke.wordpress.com

    Thanks for any help

    bernbe01

    (@bernbe01)

    try adding this to the bottom of your css

    @media screen and (min-width: 1020px) {
.hero {
padding-top: 72px;
padding-bottom: 72px;
}
}
    Thread Starter dlojek

    (@dlojek)

    Tried that and did not see any change – even played with the 72 value – changing it to 2.

    bernbe01

    (@bernbe01)

    hmmm, still working for me

    i hate recommending use of !important, but for the sake of experimentation, edit your css, putting this at the bottom

    <style>
.hero {
padding-top: 72px !important;
padding-bottom: 72px !important;
}
</style>

    also, are you clearing your wp and browser caches each time you edit the css? i did not see the css you put in there applying currently

    Thread Starter dlojek

    (@dlojek)

    Thank You! You did not see the css I added because when it did not work I took it out.

    I added the above code and it worked. I removed the style and it worked – I removed the !important and it did not work so I put it back in. I am playing with the numbers right now to get it to look how I want.

    FYI – I am using Firefox for the browser and Windows XP so not sure if that makes a difference with the !important or not.

    Thank You for your help!!!!!!!

    bernbe01

    (@bernbe01)

    you’re welcome, glad it worked out!

    Up for one more thing>? if yes let’s try making sure we keep the code responsive. Here’s a hybrid of the two previous tests. let me know if that does it!

    <style>
@media screen and (min-width: 1020px) {
.hero {
padding-top: 72px !important;
padding-bottom: 72px !important;
}
}
</style>

    bernbe01

    (@bernbe01)

    oh yes, i need to say i forgot that these changes should ideally be in a child theme or custom css plugin, otherwise you risk losing your edits when you update your theme

    Thread Starter dlojek

    (@dlojek)

    I am using the Goran Theme which I believe is a child theme of Edin? And am editing the css with customize.

    If this works:
    .hero {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    }

    what would the extra style and media screen do?

    BTW – I just tried it and it worked.

    Thread Starter dlojek

    (@dlojek)

    I may have answered my own question – the padding would then only apply to those images with a min width of 1020?

    bernbe01

    (@bernbe01)

    exactly!

    and it may be worth make a child of goran for your customizations to live in

    see here

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Goran Image Size’ is closed to new replies.