CSS Customization and Mobile theme – Stay theme

andilena · Member · Apr 21, 2016 at 9:44 am
Copy link

Add topic to favorites
Hello,

I have used CSS to have the featured images as wide as the pages but now they don’t resize automatically for mobile devices. It is possible to have this fixed so that they resize automatically on phones and tablets?

Thank you
thesacredpath · Member · Apr 21, 2016 at 6:51 pm
Copy link
I see that you have hidden the featured image on pages and then added the images back in with CSS as a background element for #main. While we can use
background-size: contain;
to make the image resize for different screen/window widths, what is very difficult is to get the padding you have used to adjust? You can add the above declaration to one of your page CSS rules and then try things out to see what I mean.

I’m curious as to why you have hidden the featured image and then added it back in with CSS. When I comment out your added CSS for the background image and padding, and display your featured image instead, the result is virtually the same, but the featured image automatically resizes for all width screen/windows and the spacing remains consistent.
andilena · Member · Apr 22, 2016 at 12:11 pm
Copy link
Thanks for the response.

I tried the above : it works on full size pages but not on pages with a side bar. Is there any ways to make this work on the pages with side bar too?

I have added the featured images to have them appear on the slider on the homepage and hide them because I want the images to be the same size as the pages.
thesacredpath · Member · Apr 22, 2016 at 6:01 pm
Copy link
Hi, I looked through your site and currently don’t see any pages with a sidebar. Do you by chance have a draft page that I can look at that has a sidebar?
andilena · Member · Apr 22, 2016 at 6:35 pm
Copy link
The only page with a sidebar is the contact page

Contact us
thesacredpath · Member · Apr 22, 2016 at 8:06 pm
Copy link
Hi, I disabled the following in your custom CSS for the Contact Us page with the sidebar
```
.page-id-10 #main {
    background: rgba(0, 0, 0, 0) url("https://perlaneraconcierge.files.wordpress.com/2016/04/entreprise_en.jpg") no-repeat scroll 0 0 / contain ;
    padding-top: 300px;
}
.hentry .wp-post-image {
    display: none;
}
```
and the featured image on the Contact Us page is resizing for me and remaining full width of the screen/window. Perhaps I’m misunderstanding.
andilena · Member · Apr 25, 2016 at 1:30 pm
Copy link
Hi,

I am a bit lost with this. All I want to do is to have the featured images resizes by themselves when using mobiles devices.

When I am using the CSS below all featured images on full size pages are resizing correctly apart from the featured image on the contact us page -which as a sidebar- but I would like to have the image the same size as the featured images on the full size pages.

background-size: contain;

I am too sure if this clear?
thesacredpath · Member · Apr 25, 2016 at 7:34 pm
Copy link
Add this to the .page-id-10 #main rule.
background-size: contain;

With the above, on phones, you will have a large gap between the bottom of the image and the top of the content area.

I’ve checked your other pages, and none of your images inserted with CSS resize for me when I narrow my browser window, or when I view them on a my tablet or iPhone, so I’m afraid you have me scratching my head.

If I disable the following in your custom CSS, the existing featured images on all of your pages resize for different window/screen widths:
```
.page-id-6 #main {
    background: rgba(0, 0, 0, 0) url("https://perlaneraconcierge.files.wordpress.com/2016/04/services_en.jpg") no-repeat scroll 0 0;
    padding-top: 300px;
}
.page-id-8 #main {
    background: rgba(0, 0, 0, 0) url("https://perlaneraconcierge.files.wordpress.com/2016/04/formules_en.jpg") no-repeat scroll 0 0;
    padding-top: 300px;
}
.page-id-250 #main {
    background: rgba(0, 0, 0, 0) url("https://perlaneraconcierge.files.wordpress.com/2016/04/entreprise_en.jpg") no-repeat scroll 0 0;
    padding-top: 300px;
}
.page-id-44 #main {
    background: rgba(0, 0, 0, 0) url("https://perlaneraconcierge.files.wordpress.com/2016/04/cgv_en1.jpg") no-repeat scroll 0 0;
    padding-top: 300px;
}
.page-id-17 #main {
    background: rgba(0, 0, 0, 0) url("https://perlaneraconcierge.files.wordpress.com/2016/04/equipe_en.jpg") no-repeat scroll 0 0;
    padding-top: 300px;
}
.page-id-15 #main {
    background: rgba(0, 0, 0, 0) url("https://perlaneraconcierge.files.wordpress.com/2016/04/devis_en.jpg") no-repeat scroll 0 0;
    padding-top: 300px;
}
.page-id-10 #main {
    background: rgba(0, 0, 0, 0) url("https://perlaneraconcierge.files.wordpress.com/2016/04/entreprise_en.jpg") no-repeat scroll 0 0;
    padding-top: 300px;
}
.hentry .wp-post-image {
    display: none;
}
```
As a temporary test, copy out all of the above from your custom CSS and put it into a plain text file for safe keeping and then delete it from your custom CSS and save. Then visit your site and narrow and widen your browser window and see if the featured images don’t also resize as you do that. Then visit your site on your phone and check all your pages, including the contact page. When I set up Stay on my test site and set featured images, with and without sidebar, all the images resize as I narrow and widen my browser window, and also when I view it on my phone.

If you do not wish to do the above, you can check my test site where I have three pages set up with featured images, Home, Page/full-width/featured image and Page/sidebar/featured image.
andilena · Member · Apr 26, 2016 at 3:23 pm
Copy link
Thanks a lot for your help. I decided to go with a full page for the contact us page which makes things a lot easier.

Thanks again for everything
thesacredpath · Member · Apr 26, 2016 at 6:31 pm
Copy link
You are welcome, and let us know if you have additional questions or problems.

No items found.