Hello,

when I checked my webpage I realized that it was modified again. Unfortunately the modification made it worse. Right now there are two problems: the old problem is back alongside with the new problem that was a result of your modifications. Could you either solve them both or if this is not possible revert your changes to the state before you started to intervene.

Furthermore, it would be nice if you could let me know which files you modified.

Thank you and best regards

Dominic

Hi,

I checked the login credentials before I posted them and checked them again. They worked all the time and are definetly correct. I don’t know why you cannot login. Maybe a firewall problem, or something? Anyway, I changed the password and hope that it will work for you now. Please try again to login (maybe 2-3 times if it doesn’t work at the first time).

Thank you and best regards

Dominic

Hey Josue,

the mockup can be found here (actual state is on the left, desired state is on the right). So basically I want the masonry galleries (except those with large spacing between the images as on the portfolio page) to stretch to fullwidth when the screen is smaller than 989px. While the white border at the left and right side of the gallery is great when the screen is bigger than 989px, I would like to use it for the images when the screen is smaller (as seen on the mockup).

And please forget about the code that I posted above. Instead I would like to know how you would solve this problem using CSS.

Thank you and best regards

Dominic

Hi,

thanks for your replay. It seems that this problem only affects my version of IE which is not a big issue.

However, I have something else that bothers me. I would like to get the images in the masonry galleries (all except those galleries with big spacing between images) to stretch to the edge of the screen only in mobile mode (similar as if you would use the masonry gallery set to fullwidth). I came up with this:

@media only screen and (max-width: 989px) {
div#av-masonry-1.av-masonry.noHover.av-flex-size.av-no-gap.av-hover-overlay-.av-caption-always.av-masonry-gallery.avia_sortable_active {
width: 106%;
margin-left: -3%; }}

@media only screen and (max-width: 767px) {
div#av-masonry-1.av-masonry.noHover.av-flex-size.av-no-gap.av-hover-overlay-.av-caption-always.av-masonry-gallery.avia_sortable_active {
width: 114%;
margin-left: -7%; }}

But this doesn’t work properly. More precisely: it works when you resize the window but not when you load the page. When the page is loaded the images will overlap at first until you resize the window which makes them stretch to fullwidth.

What code do I have to add in ordern to achieve masonry images that stretch to fullwidth when loaded in mobile mode?

Thanks and best regards

Dominic

• This reply was modified 10 years, 5 months ago by dominic.

Hi Yigit and Ismael,

okay, I realized that I was again not precise enough with my description of the problem. Sorry for that!
The problem occurs only when there are four or more images in a row, e.g. on wide screen monitors. It is not present when the template has switched to three image mode as in the screencast.
If you use firefox and zoom out with ctrl – until the page is small enough so that all five images are in one row and then slowly zoom in again you will see what I mean.

Cheers!
Dominic

Hi Yigit,

could solve it by myself.

Best,

D.

Works perfectly. Thanks a lot!