Responsive design problems

rel19

Hello,

The parallax background images are not resizing to smaller size on mobile devices - What is the best image size for BG images?

Also how do I make the font size smaller of the header titles on mobile devices?

http://newweb.formatc-live.com

Thanks!

surgeon

rel19 said: The parallax background images are not resizing to smaller size on mobile devices - What is the best image size for BG images?

If You want to set background-size to 'cover' or 'contain' - then You'll have resize effect according to browser size, but also You'll make parallax effect impossible if this image is a single image with no-repeat parameter.
So if You use single image as background and You want to have parallax effect - the image has to be big, taller then content block.

rel19 said: Also how do I make the font size smaller of the header titles on mobile devices?

When browser's width is below 480px all headings are of 80% of their oryginal size. But as I see You've placed in Custom Styles some strong definitions of heading's font-size (with '!important' parameter) - that's why headings are not shinking.
If You want to define different font-size for each heading, please go to Chillout Options >> Layout >> Headings.

rel19

Thanks for your reply.

I disabled parallax on the first background image - on mobile devices the resizing is still not really working... the first background image is larger than the whole page (covering the complete screen on mobile) How do I fix this?

Also the top header logo is really jerky on mobile devices ( constantly going up and down when scrolling) How do I disable (make invisible) the top header logo on mobile devices?

New URL: formatc-live.com

Cheers!

rel19

Hi,

Could you please let me know how to fix this.

New URL: formatc-live.com

Thanks.

surgeon

rel19 said: I disabled parallax on the first background image - on mobile devices the resizing is still not really working... the first background image is larger than the whole page (covering the complete screen on mobile) How do I fix this?

Yes, parallax is disabled, but You have 'Cover background with image?' checked.
If You need some custom styles for this content block - give a new class name to it and define css for this class in Chillout Options >> Custom Style.
Also there's 300px padding set fot top and bottom of fisrt content block.

rel19 said: Also the top header logo is really jerky on mobile devices ( constantly going up and down when scrolling) How do I disable (make invisible) the top header logo on mobile devices?

Go to Chillout Options >> Custom Style and paste this definitions:

@media only screen and (max-width: 460px) {
.logo_img1{display: none;}
}

You can set another screen width (instead of 460px) below which this image will be hidden.

rel19

Hi,

I added the following code to the Custom Style:

@media only screen and (max-width: 460px) {
.logo_img1{display: none;}
}

However the top header logo is still showing on mobile devices.

surgeon

Try use stronger definition.

@media only screen and (max-width: 460px) {
#logo img.logo_img1{display: none;}
}

or

@media only screen and (max-width: 460px) {
.logo_img1{display: none!important;}
}