j09

@adamsaulnier

it’s very common to install WordPress on a subdomain.

Example:

You create a subdomain and call it: dev

You install WordPress to dev.example.com

You work on it.

Meanwhile, anyone who visits example.com will continue to see your current HTML website.

After you’re finished developing the wordpress website, you can move it from dev.example.com to example.com

• This reply was modified 9 years, 5 months ago by j09.

In CSS,

anything that is inside brackets like these will be ignored

/* blah blah blah */

So, if you pasted the code above inside the comment bracket, it won’t work because it’s marked as a comment and will be ignored.

in other words

/*

.page-id-4 .nav-aligned-right,
.page-id-4 .nav-above-header,
.page-id-4 .main-navigation,
.page-id-4 .nav-below-header
{
display: none;
}

*/

The above code will not do anything.

Whereas, the code below should make the menu disappear on your homepage

.page-id-4 .nav-aligned-right,
.page-id-4 .nav-above-header,
.page-id-4 .main-navigation,
.page-id-4 .nav-below-header
{
display: none;
}

Please note that the difference between the two of them is the lack of comment brackets ( /* */

• This reply was modified 9 years, 5 months ago by j09.

@alliebells15

you can use this and see if it works:

.page-id-4 .nav-aligned-right,
.page-id-4 .nav-above-header,
.page-id-4 .main-navigation,
.page-id-4 .nav-below-header
{
display: none;
}

@ericgiauque

You’re welcome.

Are you saying that the image file size that Google sees is 900px * 900px but my WP theme is squeezing the actual visible size to something smaller?

Correct, that is what is happening and I could not have said it any better. The image file that gets download by browsers is 900 * 900.

How did you see what those visible dimension sizes actually are?

Using google chrome, you can right click on any element and then select “inspect”

This will open up a nice tool that I recommend you start using as it make life easy when you troubleshoot an issue on a page.

You can read more about that Here

I’m surprised that the desktop version would be smaller than the tablet version. How can that be?

On the desktop view, you have three photos sharing one line – The images are next to each other and so they share the width of the screen.

Each individual image size is still the same at 900*900 but it gets modified by CSS.

On tablets / phones your theme is set up to only show one image/item per line which leads to the images being bigger.

They are not really bigger. They are just “less small” if that makes any sense.

I know how to squeeze the sizes down in Photoshop, but how do I know what google wants? What is considered “Optimal”? I want big, visible, images on my site, that are crisply visible. How do I get that without sacrificing page speed – or is that a pipe dream?

There is no ideal size and google is not telling you not to use big photos.

Google is simply saying.

There is some performance gain to be had if you reduce the size of these photos because you don’t seem to be using them.

If your page actually displayed 900*900 images, you wouldn’t be seeing those warnings in PageSpeed

That’s very good news!

you’re welcome 🙂

@danielandrosie

Hello again

no worries, I just put it there for reference and was not waiting for a reply.

I won’t bother you with the details unless you want me to, But there is not much you can do about the inline style unless you modify the plugin files (I think)

it’s a fairly simple fix to apply in theory

<div class="um-row _um_row_1 " style="padding: 0px 0px 0px 0px;background-color: #ffffff;margin: 0px 0px 30px 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px;">

needs to be changed to

<div class="um-row _um_row_1 " style="padding: 0px 0px 0px 0px;background-color: rgba(0,0,0,0);margin: 0px 0px 30px 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px;">

However, without knowing how the plugin is structured, which I don’t, I can’t help.

.page-id-1528 header {
display: none !important;
}

.page-id-1528 footer {
display: none !important;
}

.page-id-1528 #footer-widgets {
display: none !important;
}

There is a missing at the end of your post above, is it like that in CSS too?

Also, a page link might make it easier.