[husker]

Is there a way to get the Home Page to show correctly when viewed in landscape on iphone. The 3 columns try to show all 3 columns rather than one column at a time like in Portrait mode.

http://bayareahuskers.org/wp/

Brian

[Mahesh]

Hi @husker,

Go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS:

@media screen and (max-width: 640px) {
    #featured-content.layout-four .hentry, #featured-content.layout-three .hentry {
    	width: 100%;
    }
  }

Let me know if this fixes your issue.

Regards,
Mahesh

[husker]

Hello,

There was no effect on the landscape mode, all three featured content pages are still side by side.

http://bayareahuskers.org/wp/

Brian

[husker]

I think i am closer now that I added back in the the code below this code to change the column widths. I do see one column on iphone landscape and Ipad portrait and my 3 columns fit images and text better on Ipad and devices i checked.

.featured-content-image {
text-align: center;
}

@media screen and (min-width: 991px) {
#featured-content.layout-three .hentry {
width: 30%;
}

#featured-content.layout-three .hentry:nth-child(3n+2) {
width: 40%;
}
}

@media screen and (max-width: 990px) {
#featured-content.layout-three .hentry {
width: 100%;
}
}

I also still have this code in CSS you previously provided.

@media screen and (max-width: 640px) {
#featured-content.layout-four .hentry, #featured-content.layout-three .hentry {width: 100%;

}

}

Check it out

http://bayareahuskers.org/wp/

Brian

[Mahesh]

Hi @husker,

I’ve checked your site and CSS, you’ve changed the media rule to max=> 990px and min=> 991 for making the content’s width 33% for desktops and 100% for small devices and looks great. I don’t know why have you put the below line:

#featured-content.layout-three .hentry:nth-child(3n+2) {
    width: 40%;
}

you may remove it. And the code I’ve provided you earlier, you can remove it too.

Have a nice day!

Regards,
Mahesh

[husker]

Hi Mahesh,

You had provided me the code you want me to remove to try and Control width of columns in Featured Content. See below.

.featured-content-image {
text-align: center;
}

@media screen and (min-width: 991px) {
#featured-content.layout-three .hentry {
width: 25%;
}

#featured-content.layout-three .hentry:nth-child(3n+2) {
width: 50%;
}
}

@media screen and (max-width: 990px) {
#featured-content.layout-three .hentry {
width: 100%;
}
}
Note: Your content seem to have fixed width so I’ve made the width featured content to full-width for display max-width: 990px.

Regards,
Mahesh

I used the code you provided and modified as you noticed to get Featured content to show one column at a time when viewed as portrait on iphone and Ipad.

I will test your suggestions later to see what happens to the site in different views.

Brian

[Mahesh]

Hi @husker,

Earlier, I provided the CSS as you wanted the columns to be 25% on right and left and 50% on the middle. But now, all your columns are equally divided. And you don’t need that style, so I suggested you to remove it.

Regards,
Mahesh

[husker]

Hi again,

Besides this code:

#featured-content.layout-three .hentry:nth-child(3n+2) {
width: 40%;
}

What other code did you want me to remove?

Do you mean this?

@media screen and (max-width: 640px) {
#featured-content.layout-four .hentry, #featured-content.layout-three .hentry {
width: 100%;
}
}

Brian

[Mahesh]

Hi @husker,

As you’ve modified the CSS and made it working with the following code:

@media screen and (max-width: 990px) {
    #featured-content.layout-three .hentry {
        width: 100%;
    }
}

Your modified code above will do the job and following code is redundant, so you can remove the following code that I’ve provided you earlier:

@media screen and (max-width: 640px) {
    #featured-content.layout-four .hentry, #featured-content.layout-three .hentry {
        width: 100%;
    }
}

Note: Your modified code will make the 3 column featured-content full-width when it is viewed in the screen with display 990px or less (including 640px).
And the code I’ve provided will make the 3 column featured-content full-width when it is viewed in the screen with display 640px or less.

Regards,
Mahesh

[Author]

Posts