header is not resizing in computer browser

Hi there!

Can you share a link to your site so I can take a look and see what you mean? (Also, a link to the full image you want to display so I can see what it should look like would be great too, if possible.) 🙂

Hi there. 🙂

For web it looks good, only gets cut off on the sides, and for mobile web its the same. But for an iPad web it also gets cut off on the height..

The header image on Isola is intended for decorative images that can handle slight cropping for devices of different sizes.

Although it’s not recommended that images with text or that can’t handle cropping be used in the header, you could try using some custom CSS to increase the height on iPads, so that your logo’s text is still readable:

@media screen and (min-width: 40em) {
.site-header-image {
    height: 500px;
    max-height: 500px;
}
}

To add custom CSS, firstly set up a child theme or activate a custom CSS plugin. If you have Jetpack active then you can enable its custom CSS module.

I would also make the text “college i cali – Angelica Wesslander” to show on one row in mobile and ipad format.. right now it breaks and get into two rows.. Any way of fixing that?

You could increase the amount of space that that text occupies with the following custom CSS:

.site-branding {
    width: 90%;
}

Let me know how you get on with those two snippet or if you have further questions.

Hi @collegeicali,

The CSS I provided will only increase the height of the header image on devices that are 40em in width or over, which is why the height wasn’t changed for mobile devices.

If you’d like to change the height for smaller devices, also, then you can use the following snippet:

.site-header-image {
	height: 400px;
	max-height: 400px;
}

As before, have an experiment with different values for height.

The title text also continues to go over onto two lines on mobile devices due to the size of the font and limits in place due to the width of the screen.

You could reduce the font size on smaller devices with the following to get around this:

@media screen and (max-width: 480px) {
.site-title a, .site-description {
    font-size: 0.7em;
}
}

Hope that’s helpful. 🙂

Hi there,

The following part of the CSS you gave increases the width of the area that contains the site description:

.site-branding {
	width: 90%;
}

I noticed that it was currently sitting within one of your media queries and, therefore, is only working with devices that 40em in width or over. Could you try moving that snippet outside the media query so that is works across all devices?

The updated snippet will look something like this:

@media only screen and (min-width: 800px) {
	.entry-content, .entry-summary, .entry-title, .entry-footer, .page-title, .site-header-inner, .comment-list, .comments-title, .page-content, .paging-navigation, .post-navigation, .comment-navigation, .entry-format {
		width: 800px;
	}
}

@media screen and (min-width: 40em) {
	.site-header-image {
		height: 400px;
		max-height: 400px;
	}
}

@media screen and (max-width: 480px) {
	.site-title a, .site-description {
		font-size: .7em;
	}
}

.site-branding {
	width: 90%;
}

Let me know how you get on with that.

Hi @collegeicali,

All of the images on that page look to be horizontal to me. Could you maybe point me to the specific image you mean or create some screenshots so that I can fully understand what you’re referring to?

Thanks!