want to alter the 'small screen'/mobile view to keep the header image at the top

• 

  sypantagruel · Member · Nov 2, 2016 at 7:58 am

  • Copy link
  • Add topic to favorites

  hi I would like to keep my header picture starting right at the top no matter what size of screen I use… a bit like the way it works in the affinity theme… can you help me with this please?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 3, 2016 at 7:59 pm

  • Copy link

  Hi there, I’m not seeing a “header” image on your site. I do see the “Throw off the Bowlines…” featured image. Is that what you are talking about? If so, that image is within the content div whereas the site title, logo and menu are in the masthead div, both of which are at the same level in the HTML, so moving that featured image above the title/logo/menu would be problematic. If you can clarify that is what you want, or don’t want, we can go from there.

• 

  sypantagruel · Member · Nov 14, 2016 at 9:12 am

  • Copy link

  Hi, sorry yes I mean the featured image for every page, I would like to
  a) start right at the top of the screen even for smaller screens (ie mobiles). When the web browser pages are made smaller the layout switches to having a border at the top which I don’t want.
  b) if the images need to be shrunk in some way to fit on the mobile/smaller screens I would like them to be made smaller more proportionally rather than just cut. But if a) is solved and the border at the top is removed there will be more height for the pictures which would be good because at the moment the top and bottoms of them are being cut off.

  The theme affinity does this quite well.

  Thanks for your help!

• 

  sypantagruel · Member · Nov 14, 2016 at 9:18 am

  • Copy link

  for example, on a small screen, the part of the screen at the very top (where the logo is), is much taller than the part of the screen used for the featured image. I would prefer the featured image to take the place of this whole top rectangle (where the logo is featured) and if necessary I can get rid of the logo

• 

  thesacredpath · Member · Nov 14, 2016 at 6:06 pm

  • Copy link

  Hi, when I look at https://sypantagruel.com/ I’m seeing Goran, so this CSS is for Goran. What this does is to make the turquoise bar and the site title disappear on screens/windows narrower than 600px.

  @media screen and (max-width: 600px) {
  .site-branding {
       display: none;
  }
  }