Artister header not scaling

4 Posts

marius47 posted this 24 March 2019

As it scales on various mobile sizes it cuts off parts of the image at the top and bottom and it leave padding on the sides of the header in mobile view not ling up . I can't start with the actual site if I can't figure out why I can't get it to scale properly with the responsive mobile menu header.

http://www.plextestsite.tk/old/

I have a customer who wanted a carbon copy of her existing website (don't ask), with the main difference being that she can edit her own content on WP. I managed to copy the site with the exact look and feel using Artisteer instead of Themler, but can't seem to get the CSS sorted to scale the header image accordingly. As it scales on various mobile sizes it cuts off parts of the image at the top and bottom and it leave padding on the sides of the header in mobile view not ling up . I can't start with the actual site if I can't figure out why I can't get it to scale properly with the responsive mobile menu header. http://www.plextestsite.tk/old/

Last edited 24 March 2019 by marius47

header responsive css Artisteer image-scaling

Vote to pay developers attention to this features or issue.

4 Comments

Order By: Standard | Newest

Support Team posted this 25 March 2019

Hello Marius,

To remove the space on the sides, add this code in Artisteer -> Home -> Options -> CSS Options:

.responsive .sheet {
    margin-right: 0!important;
    margin-left: 0!important;
}

Currently your header image is set to cover the header regardless of the proportions. You can set it ti contain by adding this CSS:

header {
background-size:contain!important;}

If you don't like the result, you may want to set the image as an object rather than a background and then follow the instructions here http://www.artisteer.com/?p=responsive_header

Gina
Themler support

Hello Marius, To remove the space on the sides, add this code in Artisteer -> Home -> Options -> CSS Options: .responsive .sheet { margin-right: 0!important; margin-left: 0!important; } Currently your header image is set to cover the header regardless of the proportions. You can set it ti contain by adding this CSS: header { background-size:contain!important;} If you don't like the result, you may want to set the image as an object rather than a background and then follow the instructions here http://www.artisteer.com/?p=responsive_header Gina Themler support

4 Posts

marius47 posted this 26 March 2019

Thank you. I missed the sheet code, still new to designing.

If I change the min-height pixels to a higher value than 100px, on some screens the header image fit perfectly with nothing being cut off. The issue is I can't change px to any other value than px like % percentage or auto. If I do the header disappears.

.responsive .header {
width: auto !important;
max-width: none !important;
min-height: 100px !important;
min-width: 0 !important;
text-align: center;

Thank you. I missed the sheet code, still new to designing. If I change the min-height pixels to a higher value than 100px, on some screens the header image fit perfectly with nothing being cut off. The issue is I can't change px to any other value than px like % percentage or auto. If I do the header disappears. .responsive .header { width: auto !important; max-width: none !important; min-height: 100px !important; min-width: 0 !important; text-align: center;

Support Team posted this 26 March 2019

.responsive-phone header {
min-height:120px!important;}

.responsive-tablet header {
min-height:170px!important;}

Gina
Themler Support

There is already CSS for responsive header that has height:auto. Min-height should be specified in px because absolute height is set to auto. Try specifying min-height for the phone and tablet separately: .responsive-phone header { min-height:120px!important;} .responsive-tablet header { min-height:170px!important;} Gina Themler Support

4 Posts

marius47 posted this 27 March 2019

Thank you. Will give it a go.

For interest sake, can a min-height be set for various phone and tablet sizes?

i.e @media all and (max-width: 480px)
i.e @media all and (max-width: 650px)
i.e @media all and (max-width: 720px)

Thank you. Will give it a go. For interest sake, can a min-height be set for various phone and tablet sizes? i.e @media all and (max-width: 480px) i.e @media all and (max-width: 650px) i.e @media all and (max-width: 720px)