public/assets/css/_responsive.scss

/* product */

@media only screen and (max-width: 768px) {
    .comic-content .list-img {
        max-width: 490px;
    }


    .content {
        left: 0;
    }

    /* .chapter{
        width: calc(33.33% - 2px);
        margin: 0 1px;
    } */

    .main .container {
        width: 100%;
        padding: 0;
    }

    .tranfer-bg {
        width: 100%;
        margin-left: 0;
    }

    .push-top-bg {
        width: 100%;
        margin-left: 0;
    }

    .bg-content {
        width: 100%;
        margin-left: 0;
    }
}

@media only screen and (max-width: 618px) {
    .list-comic{
        column-gap: calc(5%/3);
    }

    .list-comic .comic {
        width: calc(95%/4);
    }

    .content {
        left: 0;
    }

    .list-chapter{
        column-gap: calc(5%/3);
    }

    .list-chapter .chapter{
        width: calc(95%/4);
    }

    .main .container {
        width: 100%;
        padding: 0;
    }

    .tranfer-bg {
        width: 100%;
        margin-left: 0;
    }

    .push-top-bg {
        width: 100%;
        margin-left: 0;
    }

    .bg-content {
        width: 100%;
        margin-left: 0;
    }
}

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

    .list-comic{
        column-gap: calc(5%/2);
    }

    .list-comic .comic {
        width: calc(95%/3);
    }

    .content {
        left: 0;
    }

    .list-chapter{
        column-gap: calc(5%/2);
    }

    .list-chapter .chapter{
        width: calc(95%/3);
    }

    .main .container {
        width: 100%;
        padding: 0;
    }

    .tranfer-bg {
        width: 100%;
        margin-left: 0;
    }

    .push-top-bg {
        width: 100%;
        margin-left: 0;
    }

    .bg-content {
        width: 100%;
        margin-left: 0;
    }
}

@media only screen and (max-width: 280px) {
    .list-comic{
        column-gap: calc(5%);
    }

    .list-comic .comic {
        width: calc(95%/2);
    }

    .list-chapter{
        column-gap: calc(5%);
    }

    .list-chapter .chapter{
        width: calc(95%/2);
    }
}

@media only screen and (min-height: 700px) {
	.wrapper-content{
		//height:100%;
	}
	.wrapper{
		//height:100%;
	}
	.main{
		//height:100%;
	}
}