Issue of responsive display

keeyo
Active member
Topic Author
Member

2 years 6 months ago #49225 by keeyo

Issue of responsive display was created by keeyo

Hello,

I am now constructing a new site with Nail Salon template.
I started with a "hot_nailsalon4x_hotstart.zip" and have been modifying it to my own style.

Here is a temporary working site.

tanpakun.dreamhosters.com/

On the pages other than main page, I put modules in the "right" section, which are properly displayed with wider screen.
However, with smaller screen or smart phone, the "right" section is not relocated under the main section, which should be expected in responsive style. The modules are displayed on the right in smart phone screen.

I tried to fix it but I could not find what caused this improper display.
Do you have any idea on how I can solve this isuue.

I always appreciate your support.

Thanks.

Please Log in to join the conversation.

milos
Support Staff
Moderator

2 years 6 months ago #49228 by milos

Replied by milos on topic Issue of responsive display

Hello,

I don't know what you modified in the CSS, but you are missing some classes in your CSS file that are originally in the template files.

Please add this in your CSS file:

Code:

@media (max-width: 767px) {
    .sparky_container {
        width: 100%;
    }

    .sparky_container > [class*='sparkle'] {
        width: 100% !important;
    }

    .two [class*='sparkle'] {
        width: 50% !important;
    }

    .full .sparky_container {
        width:100%;
    }

    .full .sparky_container > .sparky_cell {
        margin: 0;
        padding: 0;
    }
}

Please do not delete any parts of the code if you are not 100% sure what it's used for.

Regards,
Milos

Please Log in to join the conversation.

keeyo
Active member
Topic Author
Member

2 years 6 months ago - 2 years 6 months ago #49236 by keeyo

Replied by keeyo on topic Issue of responsive display

Hello Milos,

Thank you very much for your prompt reply as always. I appreciate,

The addition of the sentences to Custom CSS column has resolved the issue. Thanks.

Indeed, I didn't modify the css files but just add the following sentences to Custom CSS.

Code:

.happyou {     width:auto;     height:aoto;     text-align: left;     font-family: "ヒラギノ角ゴ","Hiragino kaku Gothic Pro","Verdana","ＭＳ Ｐゴシック","MS PGothic","Osaka",verdana,arial,sans-serif;     font-size: 12px;     font-weight:normal;     line-height: 1.2em;     color: #333333;border-width: 0px 0px 1px 0px;     border-color: #000066;     border-style: none none dotted none;     }

.text_small {     font-family: "ヒラギノ角ゴ","Hiragino kaku Gothic Pro","Verdana","ＭＳ Ｐゴシック","MS PGothic","Osaka",verdana,arial,sans-serif;     font-size: 10px;     line-height: 1.5em;     color: #000066; }   .text_small_gray {     font-family: "ヒラギノ角ゴ","Hiragino kaku Gothic Pro","Verdana","ＭＳ Ｐゴシック","MS PGothic","Osaka",verdana,arial,sans-serif;     font-size: 10px;     line-height: 1.5em;     color: #333333; }  .text_small_gray_2 {     font-family: "ヒラギノ角ゴ","Hiragino kaku Gothic Pro","Verdana","ＭＳ Ｐゴシック","MS PGothic","Osaka",verdana,arial,sans-serif;     font-size: 10px;     line-height: 1.2em;     color: #333333; } 

.text_blue_2 {     font-family: "ヒラギノ角ゴ","Hiragino kaku Gothic Pro","Verdana","ＭＳ Ｐゴシック","MS PGothic","Osaka",verdana,arial,sans-serif;     font-size: 12px;     line-height: 1.2em;     color: #996600; }  
.shoukai_2 {
    width:auto;
    height:aoto;
    border-width: 0px 0px 1px 0px;
    border-color: #000066;
    border-style: solid;
    margin-bottom: 5px;
    }

I thought these sentences did something wrong, but the deletion of them did not solve the isseu.

So, now your sentences and above sentences are both in Custom CSS,

Thank you very much.

Bests

Last edit: 2 years 6 months ago by milos.

Please Log in to join the conversation.

Time to create page: 0.152 seconds