Home Images Adjusting to Show Full Width

[Luis Segovia]

Hello, sorry to bother you again, but I have two questions.

1. How can I set the images on the home section to always be displayed in full width, regardless of the screen size or device used?. Right now the way it works is that it changes to show more or less of the image according to the browsers screen size. Looks like when is bigger than 750 pixels makes the change to no show the full width.

2. Is there a way to adjust the text size on the footer section?

thank you very much for your help

[Bill Robbins]

Luis,

Good questions. For the home images, if they aren’t spanning the full width on mobile devices, that likely the images are probably too small to start with. I would suggest images that are at least 1400 pixels wide for the home block images.

If that’s not an option, you can stretch them. Here’s how:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   .mobile-picture-block img {
   	max-width: none;
   	width: 100%;
   }
   

3. Update your settings.

---

You can also change the font size of the footer text. Just add this to your Custom CSS too:

.footer-left p,
.footer-right p {
	font-size: 12px;
}

and change the 12px to the size that you'd like to have there.

If you have any trouble, let me know.

Thanks,
Bill

[Luis Segovia]

Thank you, the footer text size is now looking great.

The home images question was misunderstood, what I need is to be able to see the full with of the home images on a regular desktop or laptop. Right now if I want to see the full with of the images I have to make the browser window very wide. What I need is to make the home images to display the full with, regardless of the browsers width, I want to make the home images to shrink to adjust to the browsers width. On my desktop as I make the browsers window wider I see more of the image and the height remains the same, but what I want is to make the image size to adjust to the browsers width. The images I’m using are 1855×800 pixels

What I want is to always have the home images look full width like in the sample image one, regardless of the browsers width. I don’t want what happens now (Sample image Two)

Attachments:

1. 

   Sample-Image-One.png
   

[Bill Robbins]

I believe I understand what you’re saying. It is possible to have each image displayed completely. Unfortunately in order to do that you will lose the scrolling effect on the home page. That effect can only be created by using the images as background images. In order to ensure that the full image is show and that there are no gaps, we have to use a foreground image like we do on mobile. But because of how those work differently, the scrolling effect won’t be possible.

If you’d like to see how it looks, add this to the Custom CSS:

div.picture-block {
	display: none;
}

.mobile-picture-block {
	display: block;
}

If I can help, let me know,
Bill

[Luis Segovia]

That’s exactly what I want. Thank you very much.

[Bill Robbins]

No problem at all. Have a great day Luis.

[Author]

Posts