Header image not displayed in full

Tagged: Header image, responsive

This topic has 15 replies, 3 voices, and was last updated 7 years, 9 months ago by Wes.

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
May 22, 2016 at 7:29 pm #18100
qvyang
Customer
I’m using the Aspire Pro theme. I’m struggling to make my header image to display in full at all screen sizes. When I increase the width of the screen, the height of the image is cut off and when I decrease the width of the screen, the width of the image is cut off. The image is responsive in a way that no horizontal scrolling is required but I need to display the full image. How do I make it work?

The problem can be seen on my website: https://www.chinesetalkeze.com/
May 23, 2016 at 11:08 am #18106
Wes
Moderator
It looks fine to me. Did you get it working?

Just to be clear, are you referring to your Logo? Or are you referring to your Image in the Front-Page-1 section?
May 23, 2016 at 3:24 pm #18113
qvyang
Customer
Hi Wes,

Thanks for looking into this for me. I’m referring to my image in the Front-Page-1 section. The image is being cropped depending on the screen resolution.

Victor
May 23, 2016 at 10:39 pm #18116
Wes
Moderator
Yes, your image seems to be working fine, it’s supposed to resize depending on the screen size. For example, if it’s being viewed on a Tablet or a Mobile Device, then it should resize/shrink so it will show up better on screen.

If you want the image to look more like the demo, then I would add it more in the middle so it’s always in the center like the demo.
May 23, 2016 at 11:10 pm #18118
qvyang
Customer
That’s exactly the problem I want to fix. It’s not just resizing the picture, it’s also cropping the picture. I want people to have the exact same view of the image on a 21 inch monitor as well as on an iPhone 5. When viewing the image on a large screen, most of my body got cut off and people are only seeing my big head. When viewing the image on a mobile, people will see my full body. I also want to add text next to my photo too. I can’t achieve that with the current setup.
May 24, 2016 at 2:20 pm #18124
Wes
Moderator
If you remove or comment out this code near the bottom of your CSS (in the responsive section) it should make the image adjust a bit more –
```
@media only screen and (max-width: 1800px) {
	
	.front-page-1,
	.front-page-4,
	.front-page-5,
	.front-page-7,
	.front-page-9,
	.front-page-12 {
		-webkit-background-size: auto;
		-moz-background-size:    auto;
		background-size: auto; 
	}

}
```
You would need to add background-size: cover; to the front-page-1 code in your CSS.
```
.front-page-1 {
    -webkit-background-size: cover;
    -moz-background-size:    cover;
    background-size: cover; 
}
```
Keep in mind, the image itself won’t show up in the exact same size and position on all browsers especially since it is being resized to fit the screen.

The way responsive images work, is the browser will try to resize the image the best it can without stretching it too much while also making sure to fill the entire width of the screen without losing quality. That’s why it will show up in different places on certain devices since the browser is trying to scale the image the best it can to fit the screen it’s being viewed on. If you tried to do this with any other theme that uses Responsive Background images/Parallax it would have the same result.

Also, it’s going to be hard to see White text on top of that image since your background is white. I’d recommend either placing a tint to the background, or changing your font color.
May 24, 2016 at 7:06 pm #18125
qvyang
Customer
That doesn’t seem to do anything but I found another way to achieve this. I used .one-third and .two-thirds and updated some media queries to have both my image and text to display on all screen resolutions.

However, there is one more thing I can’t figure out. That is when I shrink the width of the screen to be less than 1024px, there is a very big white space on top and below my photo. How can I get rid of that white space? You can see it on my website:
https://www.chinesetalkeze.com
May 24, 2016 at 7:09 pm #18126
qvyang
Customer
I see that it’s to do with the height, which seems to be dynamically generated and I can’t find the class “fp1 image-section” from the css file.
May 24, 2016 at 10:56 pm #18128
Wes
Moderator
The suggestions I made earlier definitely works as I tested it with your site and confirmed that the image resizes when I resized your site in my browser. However, if I would have known you were trying to use an image on the left with text on the right, then I would have recommended adding the image inline from the beginning as that would be much easier to implement. The way you have it setup now (inline) is the proper way to do this verses having it as a background image.

The height code that is generated on the first widget area comes from the home.js file in your theme. The purpose of this function is for background images to show a minimum height just in case there isn’t much text/content inside the widget area. For example, if you add an empty text widget just so you can show the background image of the widget, then the code will make sure the image is shown at the minimum height that is set. Here is an example – http://demo.appfinite.net/imagery Notice there are sections with no text, yet the background image still has enough space to be shown.

Since you have a different purpose, you can remove this feature if you want. To remove it, take a look in your front-page.php file and remove or comment out this code –

wp_enqueue_script( 'aspire-script', get_bloginfo( 'stylesheet_directory' ) . '/js/home.js', array( 'jquery' ), '1.0.0' );

If you want me to do this for you just let me know. All I would need is a Temporary Login. I can get everything fixed a lot faster just in case there’s something else that needs to be adjusted. Just let me know.
May 25, 2016 at 12:25 am #18131
qvyang
Customer
Thank you so much for that! That got rid of the white spaces. Now I still have an alignment problem with the text next to the photo. The text is top aligned with the photo but I want it to vertically aligned at the middle. How do I do that?
May 27, 2016 at 12:14 am #18170
Wes
Moderator
Lets try adding some padding or margin to the text so it appears pushed down and more aligned…..(this is the easiest way).

I added this to the CSS –
```
.featured-margin {
	padding-top: 180px;
}
```
And this to the HTML –
```
<div class="featured-margin">
  <h4>The Simplest Chinese Course</h4>
A Chinese course designed to help busy English speakers to achieve fluency FAST.
</div>
```
More can be added for the Responsive Section (Mobile Devices) if needed.
May 29, 2016 at 10:13 pm #18208
qvyang
Customer
Fixed! Everything looks perfect now. Thank you so much for spending so much time resolving my issues! You are awesome!
May 29, 2016 at 10:17 pm #18209
Wes
Moderator
Awesome! Glad everything is working and looking great! Let me know when it’s done and I’ll share your link on Twitter.
July 1, 2016 at 3:12 am #18511
Mikesoca
Customer
hi qvyang. how is your front page doing as far as conversions i bought the same theme and was wondering if it is doing well thanks!

MS
July 1, 2016 at 3:44 am #18512
qvyang
Customer
Hi Mike, I’ve just launched my website 3 days ago. Can’t comment on the conversion rate yet but I received a lot of praises from friends.

Wes, my site is completed! Feel free to share. 🙂
July 2, 2016 at 11:12 pm #18535
Wes
Moderator
Shared it yesterday! Great job!
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.