Parallax pro, featured-post, mobile friendly

[Ayumi]

Hello,
At fist thank you for checking my post. I have been struggling with designing my blog using google inspect tool but I have reached the point that I can not figure it out my self. Could you help me?

I use parallax pro and featured post for home-section-3. I add some design in CSS. It looks fine in desktop but not in mobile.

This is the code that I put. It didn't work.

@media only screen and (max-width: 960px) {

.site-inner,
.wrap {
max-width: 768px;
}

.parallax-home .site-inner {
max-width: none;
}

.site-header {
padding-bottom: 10px;
position: static;
}

.content,
.sidebar,
.site-header .widget-area,
.title-area {
width: 100%;
}

.genesis-nav-menu,
.site-header .widget-area,
.site-title {
text-align: center;
}

.header-image .site-title > a {
margin: 0 auto 10px;
}

.genesis-nav-menu a {
padding: 10px;
}

.parallax-home .site-inner {
margin-top: 0;
}

.site-inner {
margin-top: 80px;
}

.full-width-content .content {
padding: 0;
}

.full-width-content img.pull-left {
margin-left: 0;
}

.full-width-content img.pull-right {
margin-right: 0;
}

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.pricing-table .one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}

.pricing-table .one-third:nth-child(3n+1) {
border-right: 2px solid #000;
}

.pricing-table .one-third:nth-child(3n+2) {
margin-bottom: 20px;
margin-top: 20px;
}

.pricing-table .one-third:nth-child(3n) {
border-left: 2px solid #000;
}

.content-sidebar .content,
.content-sidebar .sidebar, {
width: 100%;
float: none;
}

}

Thank you so much in advance for your kind advice.

http://www.tabinotebook.com/

[Christoph]

Hi,

none of the code you added is targeting home-section-3 or the css you added for the featured posts #featured-post-2 [class^="post-"] (Is there a reason you didn't use .home-section-3 .post ?)

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts