Display product image and description as full width page banner - Support

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

Author

Posts
April 18, 2020 at 4:24 pm #1204985

tomkent2005
Participant

Hi,
I am a huge fan of your theme and am constantly making clients aware it’s the way to go. However, I’ve been struggling for the past 12 hours with this. Is there a way to adjust the size of the container in Quick css for “Display product image and description as full width page banner”?
On laptop, the banners are getting cropped on the bottom and on mobile the banner is getting pushed up to where it’s almost hidden entirely. So far, I am using:

.container .av-content-small.units {
width: 100%; !important;
}

.template-shop .page-thumb {
width: 100%; !important;
}

#top .thumbnail_container img {
width: auto;
}

.av-parallax-inner { background-size: 100% !important; }

Also, is there a way I can have the mobile version select a different image (for mobile only)?

website is londongreyatx.com

Thank you,

Tom

April 20, 2020 at 1:58 pm #1205488
Mike
Moderator
Hey Thomas,
Do you mean the yellow banner “Get GTarted” as in the link in the Private Content area? You can have a different image for mobile with css, please include the image link you wish to use.
For the yellow banner please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
@media only screen and (min-width: 766px) and (max-width: 950px) {
	#top.archive #av_product_description .av-parallax-inner.av-parallax-woo {
		background-position: 50% 98% !important; 
	}
}
@media only screen and (max-width: 500px) {
	#top.archive #av_product_description .av-parallax-inner.av-parallax-woo {
		background-position: 50% 98% !important; 
	}
	#top.archive #av_product_description,#av_product_description .av-section-color-overlay-wrap {
		max-height: 80px !important; 
	}
	#top.archive #header_main {
    border-bottom-width: 0 !important; 
	}
	#top.archive #main .container_wrap_first {
		border-top-width: 0 !important; 
	}
}
@media only screen and (min-width: 951px) and (max-width: 1439px) { 
    #top.archive #av_product_description .av-parallax-inner.av-parallax-woo {
		background-position: 50% 97% !important; 
	}
	#top.archive #av_product_description {
		height: 180px !important; 
	}
	#top.archive #header_main {
    border-bottom-width: 0 !important; 
	}
	#top.archive #main .container_wrap_first {
		border-top-width: 0 !important; 
	}
}
@media only screen and (min-width: 1440px) { 
    #top.archive #av_product_description .av-parallax-inner.av-parallax-woo {
		background-position: 50% 10% !important; 
	}
	#top.archive #av_product_description {
		height: 180px !important; 
	}
	#top.archive #header_main {
    border-bottom-width: 0 !important; 
	}
	#top.archive #main .container_wrap_first {
		border-top-width: 0 !important; 
	}
}
```
Best regards,
Mike
April 20, 2020 at 5:55 pm #1205531

tomkent2005
Participant

Hi Mike,
Thanks for the code! I made a few adjustments for the banners I am using but now my Color Section on the Free Concierge” page is not responsive. Trying below but the color section still won’t respond. I could just use One column layout with and image, but it won’t be full width.

.avia-section.background-img-responsive {
background-size: cover !important;
}

.background-img-responsive .content {
padding-bottom: 1% !important;
padding-top: .5% !important;
}

@media only screen and (max-device-width: 736px) {
.av-parallax.avia-full-stretch.enabled-parallax.active-parallax {
background-size: 190% 70% !important;
}}

Thanks again,

Tom

April 20, 2020 at 6:39 pm #1205540

tomkent2005
Participant

Sorry … I forgot to include the link for the mobile image
https://londongreyatx.com/wp-content/uploads/2020/04/get_started_mobile_ver.jpg
Is there a way to also include control for the Category Description?

Thank you.

April 21, 2020 at 12:39 pm #1205756
Mike
Moderator
Hi,
For your “Free Concierge” page I think you are trying for this, please see first screenshot in Private Content area:
```
@media only screen and (max-width: 767px) { 
	#top.page-id-344 #av_section_1 {
		background-size: contain !important; 
	}
	#top.page-id-344 #av_section_1 > .container {
		height: 100px !important; 
	}
}
```
For the mobile banner please see the screenshot in Private Content area, and try this css:
```
@media only screen and (max-width: 767px) { 
	#top.archive #wrap_all #av_product_description {
    background-image: url(https://londongreyatx.com/wp-content/uploads/2020/04/get_started_mobile_ver.jpg);
    background-attachment: scroll;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    min-height: 200px !important;
	}
	#top.archive #av_product_description .av-parallax-inner.av-parallax-woo {
		opacity: 0;
	}
}
```
After applying the css, Please clear your browser cache and check.

Best regards,
Mike
April 24, 2020 at 7:34 pm #1206926

tomkent2005
Participant

Beautiful. Thanks Mike!

April 24, 2020 at 7:49 pm #1206927

Jordan Shannon
Inactive Moderator

Hi,

Did you need additional help with this topic or shall we close?

Best regards,
Jordan Shannon

April 28, 2020 at 4:49 pm #1207851

tomkent2005
Participant

We can close. Thanks again.

April 28, 2020 at 7:40 pm #1207941

Jordan Shannon
Inactive Moderator

Hi,

I’m glad this was resolved. If you need additional help, please let us know here in the forums.

Best regards,
Jordan Shannon
Author

Posts

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

The topic ‘Display product image and description as full width page banner’ is closed to new replies.