Jump to content

Resize images for responsive site


KRISTINVELLA
 Share

Recommended Posts

Hello,

I have images on my homepage - 350px x 700px and they will not resize on the my responsive site. Would anyone know code I can add or change to fix it.

My website is: www.redroseinvitations.com.au

Also, is there any way to have the navigation bar under the body on the homepage on the responsive site?

Thanks.

Link to comment
Share on other sites

Hi Kristin, welcome to the CC forum. I had a look at your site.

Could you tell us a little more about it, ie what version of Cubecart are you running.?

I notice at the bottom of your site it has a mobile tag which looks as though you are running a kuroto mobile skin. This looks to me as though your site is not responsive and an upgrade to version 6 with foundation skin would solve your questions.

Let us know more info so we may be able to assist.

Link to comment
Share on other sites

Thanks, I m running version 6.0.8. I have attached a screenshot my options. I am using the vanilla skin. When I change to the foundation skin, it changes the whole face of my website. Would I be able to keep the face of it, or would I then need to get someone to re-design it to look the same that as it currently does.

Skins.jpg

Link to comment
Share on other sites

Changing to another skin will change the "face" (layout, color palette, logos, etc). For the another skin, you would need to assign your logo to that skin in admin.

About the only thing I would be concerned of is the "Shop by Category" (which is also known as the store's Navigation panel). It is along the side, and that's a good place for it because you have so many categories. If you were to go with any Foundation-based skin available in the Marketplace, I would recommend the mod that moves the horizontal Navigation bar at the top to the side.

The Vanilla skin is rather 'vanilla'. There is a similar 'vanilla' skin called Minimaliser. There would be very simple edits to fit the logo you have now into the Minimaliser. And simple edits to CSS to apply the color palette.

What may be of some significant concern is how to apply any mods you may have (Customer Upload Image, for example). You may need to get the mod publishers involved in coordinating any edits to another skin.

Link to comment
Share on other sites

I have found a code for the images to re-size to different devices (max-width:100%).

I would rather keep the current skin, otherwise I would have to hire someone to re-do everything to look the same. I have had a look at the minimaliser too and it doesn't bring the 3rd party modules across - images upload and product attributes.

Would you know of any code to move the navigation from the top to under the body on the homepage?

There is another issue I have been struggling with and that's to add gallery images from a product on the responsive site. Would you know of a code for this too please?

Link to comment
Share on other sites

Navigation code:  https://www.cubecart.com/extensions/plugins/vertical-navigation-box. There are lots of different things you can do with plugins, check them out.

re gallery images: that would be standard html code, you will have so find someone to help you.  try this  <a href="/"><img src="../img/logo.png" style="width: xx%" alt="image description "></a>

Link to comment
Share on other sites

I have added this code for the products and it now displays gallery images on each product. Would you know the code used in the foundation skin, that once you click on an image, you can swipe left to view the next image. This code allows each image to be clicked on but you have to go back to the previous screen to click on the next image.

Does that code go in the "content.product" file?

{if $GALLERY}
            <ul class="clearing-thumbs small-block-grid-3 medium-block-grid-5 marg-top" data-clearing>
               {foreach from=$GALLERY item=image}
               <li><a href="{$image.source}" class="th"><img src="{$image.small}" data-image-swap="{$image.medium}" data-caption="{$PRODUCT.name}{if !empty($image.description)}: {/if}{$image.description}" class="image-gallery" alt="{$LANG.catalogue.click_enlarge}"></a></li>
               {/foreach}
            </ul>
            {/if}
 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...