responsiveness of template

marleen

Hi.

I have some problems with the homepage picture of my website. I installed a picture with the same dimensions as the 'photographer' picture from the demo installation.

On my iPhone it looks like:

There's a big black square over the top of the image

On my iMac with a relatively 'narrow' screen for safari it looks like:

The picture gets cropped on the sides.

When I use a broader screen the picture shows how it should be:

What should I do to make the website be responsive to the dimensions of the screen?

TIA!

saguaros

You can try with this custom CSS to define the position for this background image:

@media (max-width: 576px) {
.acm-features-intro.style-1 .bg {
    background-position: left 35% top 10% !important;
}
}

marleen

saguaros Thanks for the info. Can you tell mer in which file I should put this lines?

saguaros

You can put into the file: root/templates/ja_resume/css/custom.css (Create this file if it doesn't exist now)

marleen

saguaros should I put the complete text
@media (max-width: 576px) {
.acm-features-intro.style-1 .bg {
background-position: left 35% top 10% !important;
}
}
in a file called custom.css?

I'll have to make it, it iOS not in my directory. Can I use text editor from MacOS to maker the file?

saguaros

marleen You can simply create that 'custom.css' file and put code there. It will be fine.

marleen

saguaros Well, that didn't do the trick. What els can I do?

saguaros

You can share super admin + ftp account of your site, I will check for you