Responsiveness website not right

[Michiel Beskers]

Hi there,

The responsiveness of my website is not right. I see a black border on one multiple pages when the content is too small for the entire screen (resolution is 1920 x 1080), see attachments. It’s about this page: http://www.bouwbedrijftenhaken.nl/nieuws/.

Can I fix this?

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

Dear Michiel Beskers,

Thank you for contacting Styled Themes support team.

Please add this custom css on child theme or Additional css section of customizer. so your changes will lost on theme update.

#content-wrapper {
    min-height: 650px;
}

The space at the footer we are getting is due to the short content height, so here we had given min height of content area. This may give some spaces below the content.

let us know how it will goes for you.

Thanks

[Michiel Beskers]

Hi Sushil,

That doesn’t do the trick. Nothing happend after I added the custom code to style.css. Any more options?
In the attachments I’ve added a copy of the current style sheet.

Best regards,
Michiel

• This reply was modified 6 years, 8 months ago by Michiel Beskers.

Attachments:

You must be logged in to view attached files.

[Michiel Beskers]

Hi Sushil,

On IE, Firefox and Safari it worked though. Only on chrome is still get the black space below.

Regads,
Michiel

[Sushil Adhikari]

Hello Michiel ,

We had checked your site and that code is working perfectly on chrome as well. That might happen due to cache on chrome browser. So we request you to clear the browser cache and please find the attached screenshot.

Thanks

Attachments:

You must be logged in to view attached files.

[Michiel Beskers]

Thanks Sushil, it works indeed!

Still got one responsiveness problem: when I use more then 5 pictures in my st_wkgallery the second row doesn’t start at the same position as the first row. Therefor the 8th pictures is already on third row.

You can see this at http://www.bouwbedrijftenhaken.nl/plan-grijsen/

How can I fix this? Width of row-fluid?

[Sushil Adhikari]

Dear Michiel Beskers,

That happens when elements doesn’t get sufficient space to adjust on four column. You can take this example which lowers the width of each elements so every elements are aligned on single row.

@media (max-width: 979px) and (min-width: 768px) {
	.st_wkgallery .row-fluid .span3 {
	    width: 22%;
	}
}

Note: You need to write custom css for specific mobile devices to match your requirement. Here is the article about media query. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Thanks

[Author]

Posts