Paralax option blows picture up while extremely wide pic doesn't fill whole wndw

Hey jgooiker,

I want: a full width responsible picture that shows the whole pic

This may not be possible because different screens or devices have different aspect ratio and screen resolutions. What you can only do is to resize the image so that is has an aspect ratio and size that caters to most standard screen resolutions, but do not expect that the whole image will be visible in the section or slider area unless you want it to display distorted.

This is the list of the most popular screen resolutions used to date.

// https://gs.statcounter.com/screen-resolution-stats

As you may noticed, most popular screen resolutions have an aspect ratio of 16:9, so resizing the image to have that same aspect ratio should work.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

Have you tried adjusting the position of the background image to center center? It is currently set to center right, so the right portion of the background image displays on smaller screens instead of the center. You probably wanted the 3 children to be visible on mobile view.

Best regards,
Ismael

Hi,

Yes, that is one way to control the position of the background image. We could also use css to adjust it manually on mobile view. Try this css code in the Quick CSS field or in the child theme’s style.css file.

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .home #av_section_1 .av-parallax-inner {
    background-position: 35% 30% !important;
  }
}

// https://www.w3schools.com/cssref/pr_background-position.asp

Best regards,
Ismael

Hi,

Thank you for the update.

This is what we get when we manually adjust the background position using the recommended css code above.

Screenshot: https://imgur.com/3QczJAw

As you may noticed, the children are now visible in the color section area.

Now if you want to adjust the actual height of the parallax container like the screenshot below..

Screenshot: https://imgur.com/hcOjW3l

.., please use this css code.

@media only screen and (max-width: 767px) {
.home #av_section_1 .av-parallax.active-parallax {
	height: 100% !important;
	top: 0 !important;
	transform: translate3d(0px, 0, 0px) !important;
}
}

Best regards,
Ismael

Hi,

Glad it is working, and thank you for the info. The css media query for mobile view has been duplicated, so we have to remove it. We corrected the css code above and moved the css media query at the very bottom where it should be.

.av-tab-section-image {
  filter: none!important;
}
/* CSS – Tabs with equal space*/
.js_active .av-tab-section-tab-title-container {
  display: flex!important;
  justify-content: space-around;
}
#top .fullsize .template-blog .post .entry-content-wrapper {
  font-size: 14px;
}
.comment_meta_container, .comment_container {
  display: none !important;
}

.bloglist-excerpt .more-link {
  color: #816ccf;
}
.avia-cookie-consent {
  background-color: #fff;
  color: #444;
}
.avia-cookie-consent a.avia_cookie_infolink,
.avia-cookie-consent p,
.avia-cookie-consent .avia-cookie-consent-button {
  color: #444;
  border-color: #816ccf;
}

#top .avia-cookie-consent .avia-cookie-consent-button.av-extra-cookie-btn,
#top .avia-popup .avia-cookie-consent-button.av-extra-cookie-btn {
  background-color: #816ccf;
  color: #fff;
  border-color: #816ccf;
}
#top #wrap_all .header_color #menu-item-1628.av-menu-button-colored > a .avia-menu-text,
#top #wrap_all .header_color #menu-item-1627.av-menu-button-colored > a .avia-menu-text {
  background-color: #98d513;
  color: #f8f8f8;
  border-color: #98d513;
}
.html_elegant-blog #top .avia-content-slider .blog-categories {
  display: none;
}

/* Add your Mobile Styles here */
@media only screen and (max-width: 767px) {
  .home #av_section_1 .av-parallax.active-parallax {
    height: 100% !important;
    top: 0 !important;
    transform: translate3d(0px, 0, 0px) !important;
  }
}

Best regards,
Ismael