Hello all, In the snazzy theme I'm having problems getting my photo on right of home page displaying correctly when reducing the size to the mobile version, and when looking at the site on a mobile phone, where the photo is below the header. The block is only displaying the top half of the photo.

Please take a look at my site proofwrite.ie to see the problem.

Any help would be greatly appreciated!

Cheers

Rob

Comments

@media screen and (max-width: 576px) {

            .front .l-top .block-hero {

                       height: 200px;

           }

}

(Forum administrator, the line break Shift + Enter (<br>) does not work, and wrapping text with Enter creates a paragraph (<p>), resulting in unnecessary indents in the formatting (above).

Update: The <br> tag is prohibited in the filter, why did they do this? This is a necessary option for formatting text. And this is strange on a forum where code is posted.)

Olafski's picture

Hi Rob, I agree with Enthusiast's suggestion. Maybe add another CSS definition for slightly bigger screens. Together this could be:

@media screen and (max-width: 576px) {

  .front .l-top .block-hero {

    height: 200px;

  }

}

@media screen and (max-width: 959px) {

  .front .l-top .block-hero {

    height: 300px;

  }

}

@Enthusiast, at first sight, Shift + Enter is working for me in the Editor, but it looks strange in the Preview. Let's see how it looks after Save.

edit: I see, the new lines didn't work after saving the comment. I'll use paragraphs as well for now.

@Enthusiast, @Olafski 

Perfect...Thanks a million for your help. It's worked a treat!

And thanks to all those involved with css_injector: for a css novice like me, it makes editing css a lot easier.

Cheers

Rob