My employees section displays very small sizes on mobile display

Hi There,

My employee section displays very small on mobile display.
Could you please give me the css code that display as normal size? or responsive but not this small.

www.reborninaustralia.com

under our team.

Please view it on your mobile.

Regards, J

Hello there,

It looks like you applied the custom code I suggested without media query wrapper.

Please see custom CSS code I suggested previously on your other topic here https://athemes.com/forums/topic/sydney-theme-how-to-display-4-employees-on-one-row/#post-738114. Initially I did a mistake, not wrapping the code with media query. But, I immediately revised it once I noticed it. Sorry for the trouble.

Regards,
Kharis

I do not have any @media wrapper around it… here is what I have in Apperance -> customise -> Css

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

.roll-button{
border: none;
}

.roll-button.button-slider{
border-color: #A9A9A9;
background-color: transparent;
}

.roll-button.button-slider:hover{
border-color: #A9A9A9;
background-color: #373027;
color: #fff;
}

.woocommerce .widget-area {
display: none;
}

.single.woocommerce #primary,
.archive.woocommerce #primary {
width: 100%;
}

/* Normal state
.roll-button.border{
background-color: #fff000;
border-color: #fff000;
color: #ff0000;
}

On hover state
.roll-button.border:hover{
background-color: #ff0000;
color: #000;
} */

/* Normal state */
.my-cta-button .roll-button.border{
background-color: #373027;
border-color: #373027;
color: #ff0000;
}

/* On hover state */
.my-cta-button .roll-button.border:hover{
background-color: transparent;
border-color: transparent;
color: #000;
}

img.site-logo {
margin: 5px 0px 0px 0px;
}

.blog-post .entry-title {
margin: 15px 0;
font-size: 16px;
font-color: black;
background-color: #e1e1e1;
}

/* For Title /
.archive .entry-header .entry-title { background-color: #e1e1e1;}
/
For Excerpt Text */
.archive .entry-summary { font-size: 16px;
background-color: #e1e1e1;}

.entry-content a {
border-bottom: none !important;
}

.roll-team.type-b .team-item.col-md-4{
width: 25%;
}

.roll-team.type-b .team-item:nth-of-type(3n+1){
clear: unset;
}

.roll-team.type-b .team-item:nth-of-type(4n+1){
clear: left;
}

Still showing very small icons and everything…

Regards, J

Please replace the below code block:


.roll-team.type-b .team-item.col-md-4{
width: 25%;
}

.roll-team.type-b .team-item:nth-of-type(3n+1){
clear: unset;
}

.roll-team.type-b .team-item:nth-of-type(4n+1){
clear: left;
}

with:


@media only screen and (min-width:992px){
    .roll-team.type-b .team-item.col-md-4{ 
        width: 25%;    
    }    

    .roll-team.type-b .team-item:nth-of-type(3n+1){
        clear: unset;
    }

    .roll-team.type-b .team-item:nth-of-type(4n+1){
        clear: left;
    }   
}


Regards,
Kharis

Hi Kharis,

Yahoo, It worked as well…

You are so amazing… thank you thank you…

Now, I have one more support ticket to be resolved…

Regard, J

No problem. Just go easy on it. :slight_smile: