Hello,

The shaper_doctor template layout options for mobile are; col-1, col-2,col-3,col-4 etc, not col-sm-1, col-sm-2, etc.

I added the custom CSS below, but there's still an issue with the social icons:

@media (min-width: 768px) {
.col-2 {
    width: 16.66666667%!important;
    display: inline-flex;
}
.col-1 {
    width: 8.33333333%!important;
    display: inline-flex;
}
.col-9 {
    width: 75%!important;
    display: inline-flex;
}
}

Kind regards, John

Hello,

I was able to resolve my tablet issues with the following CSS, still trying to figure out mobile:

@media (min-width: 768px) {
.col-1 {
    width: 8.33333333%!important;
    display: inline-flex;
}
.col-2 {
    width: 16.66666667%!important;
    display: inline-flex;
}
.col-9 {
    width: 75%!important;
    display: inline-flex;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
}
}

Kind regards, John

Hello,

Resolution for mobile:

@media screen and (min-width: 320px) and (max-width: 767px) {
.col-1 {
    width: 15%!important;
    display: inline-flex;
}
.col-2 {
    width: 30%!important;
    display: inline-flex;
}
.col-9 {
    width: 55%!important;
    display: inline-flex;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
}
}

Kind regads, John

And back to the drawing board, not sure why, but now my desktop layout is all messed up. Seems like the layout for options selected for mobile are also the ones for desktop.

Final CSS that worked for my layout needs:

@media (max-width: 768px) {
.col-2 {
    width: 16.66666667%!important;
    display: inline-flex;
}
.col-8 {
    width: 65%;
    display: inline-flex;
    justify-content: flex-end;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
}
}

@media screen and (min-width: 320px) and (max-width: 767px) {
.col-2 {
    width: 40%!important;
    display: inline-flex;
}
.col-8 {
    width: 15%;
    display: inline-flex;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
}
}

Either way, I think the template needs an update so the mobile layout options insert col-sm-1, col-sm-2, col-sm-3, etc. unless I'm missing something.

Kind regards, John

Hi Ariba,

Sorry, I missed your original post.

Your solution is much more elegant! Worked perfectly.

Thanky you, John

Hello :)

Thank you for the kind appreciation.

You are most welcome!