Section changing when added to another version.

[Jadus]

Specifically, I’m trying to use the About Us section from the demo-barber.html in the demo-hotel.html. I copied and pasted the code where I want it but it dosen’t look the same after pasting it. It goes from 3 image locations to one. I have screenshots but don’t see a way to attach them here.

I have no idea why this is happening. Can you please help?

Thanks

---

[Support]

Hello, thanks for your purchase.

Let me explain how niche demos like Hotel, Barber, Construction, etc.. works. As these niche demos has a very different layout from the classic demos like index-classic.html, index-corporate.html, etc… We need create separate CSS files for each demo. This mean if you want to get elements from one Niche demo like Barber and paste to another like Hotel, sometimes and depending on the elements, will be needed import the respective code custom CSS too. If you look at the source code of the about us section of Demo Barber you will see custom-xxxx classes. These are the classes you should import too.

Said that, here’s the needed CSS code from demo barber About Us section. You can paste in the (css/custom.css) file:

.custom-side-dots {
        position: relative;
        padding-left: 19.2px;
        padding-left: 1.2rem;
        padding-right: 19.2px;
        padding-right: 1.2rem;
}

.custom-side-dots:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        background-color: #CCC;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        transform: translate3d(0, -50%, 0);
}

.custom-side-dots:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        background-color: #CCC;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        transform: translate3d(0, -50%, 0);
}

.custom-side-dots.custom-side-dots-rm-right {
        padding-right: 0;
}

.custom-side-dots.custom-side-dots-rm-right:after {
        content: none;
}

.custom-side-dots.custom-side-dots-rm-left {
        padding-left: 0;
}

.custom-side-dots.custom-side-dots-rm-left:before {
        content: none;
}

.custom-side-dots.custom-side-dots-at-top {
        padding-left: 15px;
        padding-right: 15px;
}

.custom-side-dots.custom-side-dots-at-top:before, .custom-side-dots.custom-side-dots-at-top:after {
        top: 44px;
        transform: none;
}

.custom-side-dots.custom-side-dots-big:before, .custom-side-dots.custom-side-dots-big:after {
        width: 14px;
        height: 14px;
}

.custom-side-dots.custom-side-dots-outside:before {
        left: -20px;
}

.custom-side-dots.custom-side-dots-outside:after {
        right: -20px;
}

@media (max-width: 767px) {
        .custom-side-dots.custom-side-dots-rm-sm:before, .custom-side-dots.custom-side-dots-rm-sm:after {
                content: none;
        }
}

.custom-images-position-1 div:nth-child(2) {
        transform: translate3d(-50%, -30%, 0);
}

.custom-images-position-1 div:nth-child(3) {
        transform: translate3d(76%, 30%, 0);
}

.custom-images-position-1 div:nth-child(4) {
        transform: translate3d(-13%, 147%, 0);
}

@media (max-width: 575px) {
    .custom-mobile-scale-1 {
            transform: scale(0.6);
    }
}

.custom-blockquote-style-1 {
        position: relative;
        border: 0;
        padding: 8px 44.8px;
        padding: 0.5rem 2.8rem;
}

.custom-blockquote-style-1:before {
        content: "“";
        position: absolute;
        left: -2px;
        top: -24px;
        font-size: 75px;
        font-style: normal;
        font-family: 'Playfair Display', sans-serif;
        line-height: 1;
        color: #777;
}

.custom-blockquote-style-1 p {
        font-family: 'Playfair Display', sans-serif;
        font-size: 20.8px;
        font-size: 1.3rem;
        line-height: 1.6;
}

* I got this CSS code from css/demos/demo-barber.css.

We hope this helps and clarify!

Let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts