Home Page - more questions about resizing etc

caroline

I'm liking how my home page looks on the desktop but not on ipad and no0tebook less than 15".

The text dominates and the slideshow gets tiny, and the 4 galleries at the bottom either become 3 +1 or disappear altogether.

I wonder if these custromizations from Sherlock would sort things out?
http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations

Cheers,
Caroline

denisegoldberg

caroline wrote: »

I'm liking how my home page looks on the desktop but not on ipad and no0tebook less than 15".

The text dominates and the slideshow gets tiny, and the 4 galleries at the bottom either become 3 +1 or disappear altogether.

I wonder if these custromizations from Sherlock would sort things out?
http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations

Those are just the start at customizations, showing you how to target different sized windows. You would need to decide what you want to show on those screens, how you want to change your home page, and then plug in the pieces where Sherlock's code says "SOME_DEFINITIONS".

I think a good part of the problem is the side-by-side text and screen show. If the device is narrow enough the slideshow will be shown followed by the text, and that looks find. But when I used http://quirktools.com/screenfly with your side and specified Apple ipad 1/3mini I saw a tiny slideshow next to text. So that appears to be the problem size.

--- Denise

caroline

denisegoldberg wrote: »

Those are just the start at customizations, showing you how to target different sized windows. You would need to decide what you want to show on those screens, how you want to change your home page, and then plug in the pieces where Sherlock's code says "SOME_DEFINITIONS".

I think a good part of the problem is the side-by-side text and screen show. If the device is narrow enough the slideshow will be shown followed by the text, and that looks find. But when I used http://quirktools.com/screenfly with your side and specified Apple ipad 1/3mini I saw a tiny slideshow next to text. So that appears to be the problem size.

--- Denise

Hi Denise,

So I need to define the componenets that I want to make behave? Not sure of the correct terminology for this? I'm guessing I have to define the text/html box, the slide show and possibly the 4 galleries?
How would I find this information please? I'm already thinking this is too complicated for me!

Caroline

denisegoldberg

caroline wrote: »

So I need to define the componenets that I want to make behave? Not sure of the correct terminology for this? I'm guessing I have to define the text/html box, the slide show and possibly the 4 galleries?
How would I find this information please? I'm already thinking this is too complicated for me!

You can see an example with filled in code in the examples section of the page you pointed to in your first post.

You have already defined the components for your home page. Those CSS sections would be used to change the definitions for the specified screen sizes.

--- Denise

caroline

I ve tried playing around with this but really don't understand what I'm supposed to put instead of some definitions:( I tried using the examples to see if it made any difference but it didn't. Not really sure where I add the code? Does it go in a CSS block on the home page?

thanks for your help Denise,
Caroline

denisegoldberg

caroline wrote: »

I ve tried playing around with this but really don't understand what I'm supposed to put instead of some definitions:( I tried using the examples to see if it made any difference but it didn't. Not really sure where I add the code? Does it go in a CSS block on the home page?

The CSS can be placed in your theme, in a CSS block for entire site, or if it is only for your home page in a CSS block on your home page.

I think the best you can do is to not display some sections of your home page on smaller screens. For example, remove the slideshow, or remove the content block where you have the 4 gallery blocks shown since the viewer can also get to those galleries from your menu.

--- Denise

caroline

denisegoldberg wrote: »

The CSS can be placed in your theme, in a CSS block for entire site, or if it is only for your home page in a CSS block on your home page.

I think the best you can do is to not display some sections of your home page on smaller screens. For example, remove the slideshow, or remove the content block where you have the 4 gallery blocks shown since the viewer can also get to those galleries from your menu.

--- Denise

Thanks Denise, can I check my understanding of what you are saying please Denise - do you mean that it's possible to remove the slide show or content block with 4 galleries from the smaller screen only but retain them on larger sizes?
If that is what you mean how do I do that please?

Caroline

DanCarl97

caroline wrote: »

Thanks Denise, can I check my understanding of what you are saying please Denise - do you mean that it's possible to remove the slide show or content block with 4 galleries from the smaller screen only but retain them on larger sizes?
If that is what you mean how do I do that please?

Caroline

Yes, that's what she means. You actually gave a link to this functionality at the start of the thread.

The following code will hide the slideshow on smartphones.

@media only screen and (max-width: 640px)
{
.sm-page-widget.sm-page-widget-slideshow {
display:none;
}
}

To hide on both smartphones and tablets, swap 640px for 1024px.

caroline

DanCarl97 wrote: »

Yes, that's what she means. You actually gave a link to this functionality at the start of the thread.

The following code will hide the slideshow on smartphones.

@media only screen and (max-width: 640px)
{
.sm-page-widget.sm-page-widget-slideshow {
display:none;
}
}

To hide on both smartphones and tablets, swap 640px for 1024px.

s

Sorry for being so utterly dense about this, it must seem like pulling teeth:(
I've no idea how or where to get the definitions from. If I wanted to apply this to either of the other elements on the page, where the heck do I get the definitions from?
Ideally I would like to make the gallery block shrink to fit but it looks that is a no no and probably better to delete it altogether, but if possible to hide it, what is it called?

Caroline

DanCarl97

caroline wrote: »

s

Sorry for being so utterly dense about this, it must seem like pulling teeth:(
I've no idea how or where to get the definitions from. If I wanted to apply this to either of the other elements on the page, where the heck do I get the definitions from?
Ideally I would like to make the gallery block shrink to fit but it looks that is a no no and probably better to delete it altogether, but if possible to hide it, what is it called?

Caroline

They are quite fiddly to find. Infact, they're really hard to find. Really, I would recommend someone should make a list of the common classes for different elements.

If you do wish to try and find them, you can do so with the following (in Chrome):

I use Google Chrome to find them. Right click anywhere on the page (avoid images because it may block right-click), and select 'Inspect Element'. Then, on the box that opens on the bottom, there should be a magnifying glass somewhere (on Mac, it's on the top-left. I'm unsure about Windows). Then, click on the element you want to find. What you'll need to do is search in the nearby code (usually higher up in the structure) for something similar to sm-content inside the 'class' attribute.

It's fairly similar for other browsers.

To shrink the gallery block, it should do automatically (I just tried it). I'm sure not what you'd like it to do. The icons themselves do shrink (even though only a little bit).

caroline

Thanks Mel and Denise for all your help - I give up! I have tried hiding the slide show and the content block, the latter seems to be more of a pain. Compleyely removing the content block seems to solve most of the problem with the slide show displaying above the text and at a reasonable size on all but the ipad.

Life was so much more simple when we only had to look at our sites on desktop screens. I think the answer to all of this is that its best to keep it simple unless you are pretty good with code.

Thank you both for your time and patience:)

Caroline