Row Padding

[Paul Victor]

Hi,

I have added a 10% left and right padding on my rows but this is also displayed on mobile devices causing problems on the layout. Is there any way I can decrease that on mobile devices?

Thanks!

[David Martin – Support]

You can create Row’s specifically for mobile/tablet/desktop only using the Visibility Option. Each Row can then have it’s own setting.

Thanks.

[Paul Victor]

Hi,

I don’t need additional rows as it would require a lot of manual work to re-edit. Is there a workaround for this?

Thanks!

[David Martin – Support]

In that case you would need to manually use CSS media queries to remove the padding for mobile/tablet.

Thanks.

[Paul Victor]

Yes, but how would I need to do that? Thanks!

[Rui Guerreiro – SUPPORT]

In that case only a global css rule can sort it.

Can you try to add the code below to your custom css option.

@media only screen and (max-width: 767px){
  .fw-row>.spb-row {
     padding-left: 0% !important;
     padding-right: 0% !important;
}

}

-Rui

[Paul Victor]

Thanks Rui, that works!

Another question; I have set up the Instagram feed to display on the homepage but I have noticed that the image quality isn’t that great. Is there a way to solve this? Ideally, I would like to use 6 columns instead of 5. This would also help with the image quality because the source images will simply be scaled down a bit. Is there any way to do it?

Thanks!

[Rui Guerreiro – SUPPORT]

The instagram cdn is providing images with the size 320 x 320, that also happens in our demo site. Guess it’s in a limited size because of bandwidth that it can consume.

Maybe you can intercalate some instagram photos with tweets like we have in this page.
http://uplift.swiftideas.com/elements/social-grid/

Unfortunately it’s only available in 3 or 5 columns.

-Rui

[Paul Victor]

Would this be a possible solution? http://www.swiftideas.com/forums/topic/instagram-social-grid-image-quality/

Also, is there a way to change the hover background color and text color of the Instagram posts? Not sure if I glanced over it.

[Rui Guerreiro – SUPPORT]

I think it can be a solution, can you try to change it in the functions.js to see if it works? It’s necessary to disable the performance options so the functions.js can be loaded instead the minified version.

Try this css to change the background color, it should be rgba is you want some transparency.

.blog-grid-items .instagram-item:hover .inst-overlay {
    background: rgba(216, 47, 47, 0.6);
 }

-Rui

[Paul Victor]

Hi Rui,

I have changed the functions.js and min.functions.js files and have disabled the performance options but I don’t see a change. Any idea what I may done wrong? I have cleared all caches. The child theme is active with the files placed accordingly.

The Instagram columns also don’t appear to be responsive. On the iPad, I see the 5 columns seperated into 2 columns creating 3 rows.

I have also decreased the font-size of the text within the Instagram items but there’s a strange zoom effect going on of the text when you hover over it. The font-size goes from the original font-size and color to what I have changed it to. Any idea how I can solve this?

[David Martin – Support]

What have you amended in the functions.js file? The CSS should go in Theme Options => Custom CSS.

The functions.js file will not be overridden in a child theme unless you have specifically dequeued the parent JS file and enqueued the new child theme .js file.