Adjusting image size

garethemlyn · Member · Jul 7, 2017 at 12:53 am
Copy link

Add topic to favorites
Using the theme verity, each image I add even when it’s the correct scale for the header image, it chops off the bottom and top. Can I adjust the height with css to stop this happening?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 7, 2017 at 1:33 am
Copy link
Hi there, this is a bit of a challenge with full width headers and responsive designed themes. The following will keep the full height of the header image clear down to mobile sized screens, but on wider windows 1500px and wider, there will be a band of white that will appear to the left and right of the image. See what you think with the following.
```
@media screen and (min-width: 48em) {
  .absolute-header .custom-header   {
    padding-top: 350px !important;
  }
  .custom-header::before {
    background-size: auto 100%;
  }
}
```
Note that the image will be cropped left and right on smaller screens, but your title, foamdation will be visible. Make sure and check on your mobile just to make sure. It is fine on mine.
garethemlyn · Member · Jul 11, 2017 at 10:25 pm
Copy link
Thank you, that certainly fixes the issue on my laptop screen but when looking on tablets and mobiles it chops off the bottom so the logo “FOAMdation” is no longer visible. Other themes that I have found work well for the site have the same issue, no matter how I adjust the header image prior to upload before placing it, it becomes cropped automatically.

As the site is active I have to keep reverting back to a theme that works for now and keep experimenting so it will revert back to the Shoreditch theme for the time being.
thesacredpath · Member · Jul 12, 2017 at 1:27 am
Copy link
On full width images that span the entire width of the window/screen, having a fully responsive image that shows entirely can be done, but with graphics in the image, such as FOAMdation, on phone sized screens it becomes very tiny. We can make some adjustments using a Media Query to adjust only on small screens if you wish to try that. In my testing, the title stayed visible on my emulator. Apparently my emulator let me down.

Which theme were you wanting to use?

No items found.