News Pro GK5

Hi, my question is related to the latest version of News Pro GK5, that I use on a template different from Tech News.

I meet an issue using the "standard mode" layout: on mobile version the "Links block" appears aside the main area instead to collapse below.

Usually I use a Gantry template, but I have installed the module on another website, and I have tested the module using Protostar but I still have the same issue for mobile version (see the attachment).

How can I fix this issue?

ScreenHunter_224 Mar. 16 11.35.jpg

ScreenHunter_225 Mar. 16 11.35.jpg

Regards

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

I have sent a private message, thank you

Hi, can you help me about this issue, please?

Regards

Hi

Add this to css:

Code: Select all

@media only screen and (max-width:767px) {
.nspArts.right {
    float: none;
    padding: 0 0 15px;
    width: 100% !important;
}

.nspLinksWrap.right {
    border-top: 1px solid #eee;
    float: none !important;
    padding: 10px 0 0 !important;
    width: 100% !important;
}

.nspList.active, .nspArtPage.active {
    margin: 0;
}
}

@media only screen and (max-width:600px) {
.nspList > li > .nspImageWrapperRight {
    display: block;
    float: none;
    text-align: center;
}
}


Dear teitbite,

thank you for your help. Now it's really better, but I can't understand why on mobile the images don't float to left as for desktop (please look the same page).

I made several attempts playing with css, but I did not succeed. Can you suggest a solution, please?

Regards

Hi

It's in this class:

Code: Select all

@media only screen and (max-width:600px) {
.nspList > li > .nspImageWrapperRight {
    display: block;
    float: none;
    text-align: center;
}


I'm ordering images to be be over the text and centered. This is a standard since for portrait view on some phones there would be an image and like 2-3 letters on side. Just remove this class from style I gave You or use for smaller screens like 320px, not 600px as it's there right now.