You can open style.css
, find:
.header-wrap {
width: 100%;
height: 220px;
background-color: #111;
background-repeat:no-repeat;
background-size:cover;
background-position: center center;
border-bottom-width: 1px;
border-bottom-style: solid;
position: relative;
}
and change 220px to the size you want, 420px for example. Also do this simple math 420-220=200 and remember 200.
Now find:
.top {
height: 150px;
}
and add 200 to 150, so change 150px to 350px.
For the mobile view I think you should find:
@media screen and (max-width: 650px) {
.post-template-1 .details .p-share, .single-content.featured-image:before, .comment-main:after, .comment-main:before {
/* Elements with Display None */
display: none;
}
/* ------ */
.container { margin: 30px auto; }
.content-wrap { padding-top: 30px; }
and add bellow it .top { height: 150px; }
Remember to use a child theme. In case the theme is updated you might lose your changes.