Images not being responsive

**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

**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.

**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%; }

**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%; }

**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%; } }

**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

**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.

**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.

**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%; } }

**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" />