Images not being responsive

Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Tue Jul 28, 2015 8:30 pm
Reply with quote
Report this post
Hi,

Not sure if this is a Rockwall issue or a NewsShowPro GK5 issue - so am posting here for a start.

I'm using 2 NSPGK5 instances on the homepage of a site (happy to PM someone the url) In both Desktop and Tablet views... the images are rendering correctly... but once you go down to mobile level dimensions... the GK5 fails to render the images correctly. Pls see the attached screen shots.

Where do I go/what do I do to get the mobile version to render correctly?

Screenshot 2015-07-28 12.16.23.png


Screenshot 2015-07-28 12.16.36.jpg


Thanks,
P
User avatar
Fresh Boarder

teitbite
Thu Jul 30, 2015 1:08 pm
Reply with quote
Report this post
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.
User avatar
Moderator

teitbite
Wed Aug 05, 2015 12:52 pm
Reply with quote
Report this post
Hi

Add this to override.css and make sure override is enabled in template settings:

Code: Select all
#gkMainbody + #gkMainbodyBottom {
width: 100%;
}
User avatar
Moderator

GK User
Thu Aug 06, 2015 4:37 pm
Reply with quote
Report this post
Thanks for the advice... I did it and it has restored the responsiveness... However - it has changed the layout of the module on the desktop.

Where the 4 items used to spread across the entire page - they are now confined to the lefthand side and much smaller. (Pls see the screenshot attached for the comparison.)

Is there a way to get them to be both responsive AND equally spread across the desktop page?

Thanks,

P

teitbite wrote:Hi

Add this to override.css and make sure override is enabled in template settings:

Code: Select all
#gkMainbody + #gkMainbodyBottom {
width: 100%;
}
User avatar
Fresh Boarder

teitbite
Sun Aug 09, 2015 2:26 pm
Reply with quote
Report this post
Hi

Try to restrict this code to layouts smaller than desctop:

Code: Select all
@media only screen and (max-width:1150px) {
#gkMainbody + #gkMainbodyBottom {
width: 100%;
}
}
User avatar
Moderator

GK User
Wed Aug 12, 2015 5:17 pm
Reply with quote
Report this post
I tried the first css fix and it definitely provides the responsiveness... :) but the 2nd css override code you sent via PM (in order to restore the desktop layout) didn't change anything on the desktop side. :( Any other ways to achieve the current layout on the desktop, but make the tablet and mobile layouts responsive?

Thanks,

P
User avatar
Fresh Boarder

teitbite
Sat Aug 15, 2015 12:07 pm
Reply with quote
Report this post
Hi

I cannot see my code on Your site now. Instead there is a fixed width value: "width:1150px;". Please check if code is added properly. It will override this value, which is a cause of the problem.
User avatar
Moderator

teitbite
Wed Aug 19, 2015 7:22 pm
Reply with quote
Report this post
Hi

I just checked Your site and now code is there, but not exactly as I gave You. I can see:

Code: Select all
#gkMainbody + #gkMainbodyBottom {
    width: 100%;
}


and not

Code: Select all
@media only screen and (max-width:1150px) {
#gkMainbody + #gkMainbodyBottom {
width: 100%;
}
}


this second code will only work for screens smaller than 1150px and will leave the desktop untouched.
User avatar
Moderator

GK User
Tue May 10, 2016 1:05 pm
Reply with quote
Report this post
Hi,
it could be completely unrelated, but thanks to this post I discovered how to apply a style only for desktop sized screens, here's an example:
Code: Select all
@media only screen and (min-width:1150px) {
#gkMainbody + #gkMainbodyBottom {
width: 100%;
}
}
User avatar
Senior Boarder

teitbite
Wed May 11, 2016 5:53 pm
Reply with quote
Report this post
Hi

Yes, that's correct. This is how to include a code for screens bigger than 1150px.
Additionally in <head> section of the website there has to be a line to make the use of such functions possible:

Code: Select all
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.