Width difference between Boxed and Full Width page layout

[guentherportfolio]

Hi,

currently I am trying to find the right width of the page layout grid.

At the moment I have set up my images for 1170px full width, but unfortunately there are some layout differences, even if the images have the same height, they aren’t aligned at the bottom. For better understanding, I attached a screenshot. The images are sliced in 2/3 and 1/3. I hope you understand what I mean and could help me with that issue. Thanks in advance.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Can you add a URL/login so we can take closer look?

– David.

[guentherportfolio]

This reply has been marked as private.

[David Martin – Support]

Try adding this to your custom CSS:

.height-limit img {
    max-height: 365px;
}

I have added height-limit to those two image assets.

Thanks.

[guentherportfolio]

Hi David,

Ok thank you for your help. Is there a way to keep the height as it is and build up the images on the template based width? If the images are sliced 2/3 and 1/3 and overall have the same width like what the template is programmed, everything shall work, or do I misunderstood anything? Thanks in advance.

[David Martin – Support]

Hi,

The image ratio is different, so the heights will vary slightly. The height is relative to the width of the given image ratio.

Ex, if you set both to 4 columns, the result would be different also:

[guentherportfolio]

Thanks for your help so far.

I thought it would be possible to orientate on the templates width and build up a template in Photoshop, which has the width of the neighborhood template. Then I thought I could slice the width i.e. in 6 rows and build up my images. So the Images overall width would have exactly the width of the neighborhood template. Of course all images would also have the same height to have a clear structure.

The Swift Page Builder with it’s row options would be the perfect tool I thought. So my Photoshop template would have exact the same ratios like the Swift Page Builder rows would be sliced, therefore the Images shall actually have no unexpected width or height differences, or do I misunderstood anything? What template width does neighborhood have and how does it calculate it’s spaces between the rows?

Furthermore, I am asking myself, if it is really a good idea to fix the height of the images via adding some css rules? In example, on the mobile view, some of the images would be squeezed.

I really need to find a solution for this. Thanks in advance.

[David Martin – Support]

Hi,

The site has a max width set on containers, the elements within are then calculated on percentages of the container so the layout is mobile friendly.

Yes, you are right – using the above I can help you amend the max width for the mobile/tablet views.

Cheers,
David.

[guentherportfolio]

Hi David,

thanks so far. The first part with the containers do I understand, but unfortunately my english is not the best, so I do not clearly understand what you mean with the second part of your answer. Do you mean you can help me with that issue. Do I understand it right, that the maximum width of the Neighborhood template would help me? Thanks in advance, David.

Best regards

[Swift Ideas – Ed]

Hi @guentherportfolio

Due to responsive design ( the site resizing with your browser window as it shrinks ), it’s not really practical to design in that way. The theme uses “columns” that are percentage based and adjust as the window resizes. So while something may match up at one size, it likely wouldn’t at smaller sizes.

If you want to try, the inner container size by default is 1170px. If you’d like, you can disable the responsive functionality of the theme in the theme options.

Hope that explains it.

– Ed

[guentherportfolio]

Hi Ed,

thanks for your explanation. I understand that the theme uses responsive rules, which is great. For that reason, I wouldn’t disable this option. If I understand now everything right, it isn’t possible to build up a page with the image assets, even if they have the same height, due the problem, that they will not look as it should on mobile devices? Thank you for you help so far.

[David Martin – Support]

Yes, you are correct.

However, if you want to go that route we can try to help you with media queries for mobile/tablet to adjust the height on each size.

– David.

[guentherportfolio]

Hi David,

I think I will keep it as it is for now. I believe you have more knowledge about that problems and you are knowing what you do and why you build up the theme in that way. Of course it is a bit disappointing for me, but it´s better to have a shop which works fine on every device, then to have a more unique site including more errors 😉 But may be it is a proposal which you can include in a future update. Thanks so far.

Best regards
Martin

[David Martin – Support]

Thanks Martin, will do.

– David.