[husker]

HI Mahesh,

No that’s not the issue.

I created a test page with the same image used 4 times,

Check out the IPhone Portrait?

http://bayareahuskers.org/wp/test-image/

Brian

[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

[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

[husker]

Hi Pratik,

Yes the code got me almost there.

I had to change the max-width to 990px so that Social Icons would stay in line on Ipad Portrait mode and not center below. It stays looking like the desktop.

Then I noted the Site Title and Site Description were not exactly centered but close.

I then set padding to 0 0px; for #site-branding in the (iPad Portrait) CSS Code. This moved them closer to center.

It seems the Site Title maybe still be a bit left and not perfectly centered. Is there any more padding that could be affecting the Site Header? It is close.

Maybe it is just my eyes.

http://bayareahuskers.org/wp/

Thanks

Brian

[husker]

Sorry to bother you, I found it at

@media screen and ( max-width: 1200px ) {
.menu.catchresponsive-nav-menu li a {
font-size: 13px;
}
}

I changed font from 14 to 13 and it lined up.

[husker]

Hi again Pratik,

This was more of an issue until i was able to get the 3 featured content to display correctly for my 3 columns and going to single column on Ipad Portrait and Iphone in all modes.

Thank you and i will do an excellent review for all the work you guys do and provide.

[husker]

Hi Pratik,

For sure I need to center #site-header for Iphone Portrait and Landscape and Ipad Portrait.

Since desktop and Ipad Landscape are 3 wide, they look ok with a left #site-header.

I realize this may be involved, but I like where the social icons are located on all devices currently.

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

[husker]

Hello,

http://bayareahuskers.org/wp/

The left and right gray area like on the home page. Can one have a slightly larger white main area and less left background on left and right? It would help across all devices.

Brian

[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]

Yes I did the update with no problems.

Brian

[husker]

When it is made available in WordPress I will update. It is not there yet?

Thanks

Brian

[husker]

I did move mobile menu to the left. Much better.

I did try the scroll issue code and it helped see the bottom menu page but Menu Labels disappear and come back as you scroll.

I will leave code in so you can see as I have not made site live yet.

Brian

[husker]

Can we resize the mobile menu so it does not extend to the bottom of the iphone? Font could be smaller and still be seen.

[husker]

I got the colors to work.

There may be an issue with the mobile menu. Try and access the last Menu Item – 2015 Past Events om my page with your phone.

http://bayareahuskers.org/wp/

I have a hard time scrolling down to that last menu item on the Iphone? Is it me or is there an issue?

There is parent Events and child Upcoming Events and 2015 Past Events.

Brian

[husker]

I used the code and was able to play around and get all phone menu pages to be red.

I however can not get the text color to change using color: #fff;

It stays black. I tried adding color to several lines and no change in menu text color.

Is something missing?

http://bayareahuskers.org/wp/

[husker]

I got the ipad mobile to work but still not sure how to affect the iPhone mobile menu.

All pages show grey with black font no matter what I try when you click menu.

http://bayareahuskers.org/wp/

[husker]

Yes that worked.

Brian

[husker]

Just msking sure i did it right. Mark it completed. You guys are great. Thanks again.

[husker]

Ok I changed the code in CSS as follows. I moved .mobile-menu-text code to be below the #mobile-header-left-menu and that seemed to work. is that correct?

.mobile-menu,
.mobile-menu-anchor,

#mobile-header-left-menu {
float: right;
}

.mobile-menu-text {
display: Menu; display: inline-block;
vertical-align: top;

}

#mobile-header-right-menu {
float: right;
}

.mobile-menu-anchor a.genericon-menu,
.mobile-menu-anchor a.genericon-menu:hover {
color: #ffffff;
text-decoration: none;
background-color: #cc0c2f;
font-weight: bold;

}

[Author]

Posts