Project Section - one image

Hi There,

Can I have one image for project section, full width and maintain the current height?
Thank You

Hello @lyle,

You could achieve this by adding a text widget in the project section, where you add your picture HTML syntax and then force the widget to go for the full width, via CSS:

.widget_illdy_project{
width: 100%;
}

This could work with the project widget picture instead of the text one, but I believe that your picture will be cropped to a small version so you will not really be able to display it.

Let me know if you got this alright, I hope everything is clear enough.

Regards

Thank you,
I get the one image now, although now i have a sizing problem across the browser and responsive on the mobile.

I have the following code in the text widget:


On the browser the image is not full width, and on mobile the image scrolls way right.

When i take out the ‘style’ tag both issues remain with just
.widget_illdy_project{
width: 100%;
}
in the css.

current code in text widget looks like this:

our projects

Hello @lyle,

Both messages have broken links, can you maybe provide new screenshots or website link, directly?

Thank you.

Thank you for your help.
please see screenshot attached, and link to website: http://www.activscan.com.au/

if I remove the ‘style’ tag from the projects sidebar, the image defaults back to the small cropped version.
i can increase the style width to cover my screen, however it is not auto responding to screen size or mobile in any case.

Many Thanks,
Lyle

Hello Lyle,

Thank you for the extended details!

You should first try to use width: 100%; and give it another try.

If still not working, I will closer investigate and get back to you with more info.

Regards

LATER EDIT:It seems like the widget needs to have a full width property on top of the 100% for picture.

In your particular case:

#text-18{
width: 100%;
}

A more generic code would be:

#projects .col-sm-3.widget_text{
width: 100%;
}

With the different section IDs this could be used as the solution to implement full width custom text widgets.

thanks for the quick response!
Still having difficultly. Picture is now huge.

Anything else i could try?

Many Thanks,
Lyle

Hello Lyle,

I cannot see the code I pointed out on the website, can you please add it?

Additionally, add a height to the text widget:

#text-18{
height: 500px;
}

This might generate other issues on responsive layout, you might want to check it out.

Regards

Sorry, getting confused now,
can i give you back end access to have a look?

Sure, I’d thought you’ll never ask :stuck_out_tongue:

Provide me temporary access, but please keep in mind that I might have a look and fix it later.

Regards

awesome,
try: username: colorlib
Password: JncyUSZ)@Rwi)g6pd2GGW0tG

many Thanks,
Lyle

Hello,

All should be fixed now, please have a look.

Ideally, you need to take care of the image height by cropping it before adding in the section.

Regards

Awesome, thanks so much.
So to reduce the height now, just crop the image before upload to wordpress? would like it a bit smaller in height.
Also, on the mobile, there is a lot of white space between the picture and testimonial, is there a way to remove the white space?

Many Thanks,
Lyle

it appears also that the picture goes right down to services title also, with testimonials overlaid.

Ok, so I think i have fixed the height issue across the web browsers, however the responsive issue remains on mobile with the white space. It appears that the image is not responsive at all.

Hi Ion,

Really sorry for all the bother…

If I take out the text 18 code, the mobile responsive renders great, however the browser seems to always zoom the image right through the section, under testimonials and into services. If I leave text 18 code in, height in browser great, but white space on mobile.

Right now I have no text 18 code, an image 1920 x 500, which is looking good on browser, but probably too thin on mobile.

I have a range of image sizes in the media library now, if you have a chance to check maybe.

Ideally, i think stopping the zoom when there is no text 18 code could be the answer?

Thanks again for your assistance.
cheers,
lyle

Hello Lyle,

I’m happy that you got so far with the setup, but right now it’s unclear how I could help you any more, so just let me know about it. I see the picture alright, just that it seems like you when you edited the heigh of it you messed with the ratio and everything is squized now.http://www.activscan.com.au/wp-content/uploads/2016/08/projects3.jpg

Regards

Hi Ion,

Yes you are right, as it is the best result i could get across the 2 modes (browser and mobile) image size 1920 x 500

The attached files show the image (748 x 500) without the text 18 height code. The browser seems to zoom this image to cover the entire project section. however the mobile is perfect.

If I set the text 18 code (using height 325 in this instance) the browser shows the image right through the projects, under testimonial and into the service section. on the mobile, the image is displayed, but with white space underneath. see screenshots.

I would like the mobile image to show as screenshot in last post, and also the browser to display as high quality as is displaying now with the 1920 x 500 image.

Would this be possible?

Thanks again, really appreciate your help!