Jump to content

Need Foundation Layout Help


Recommended Posts

I have the Small logo set for 12 columns, and the button row as well. But no matter what combination I try, I can't seem to get the three buttons to line up next to each other. I've obviously rearranged the code, so I know it's my fault. Help fixing it would be appreciated. I'd like the buttons to be centered under the logo.

 

https://dirtybutter.com/plushcatalog/kids-preferred-plush-animals.html

<div class="row marg-top">
	<div class="small-12 medium-4 large-6 columns">
                  <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_URL}/images/logos/barnlogojaggedframe.jpg" alt="{$META_TITLE}"></a>
        </div>
	<div class="small-12 medium-8 large-6 columns nav-boxes"> {* DIV CLASS *}
  <div class="row"> 
  {* ROW 1 SMALL*}
	<div class="right text show-for-medium-up">{include file='templates/box.basket.php'}</div>

	<div class="left-text show-for-small"><a class="left-off-canvas-toggle button white tiny" href="#"></a><i class="fa fa-bars fa-2x"></i> <a class="button white tiny show-small-search" href="#"><i class="fa fa-search fa-2x"></i></a>{include file='templates/box.basket.php'}
	</div>
		{include file='templates/box.currency.php'}
		{include file='templates/box.language.php'}
		{include file='templates/box.session.php'}
	</div> 				
<div class="row hide" id="small-search"> {* HIDDEN SEARCH BOX THAT SHOWS AFTER ICON CLICKED ON SMALL *}
	<div class="medium-5 columns">{include file='templates/box.search.php'}</div>
</div> {* END HIDDEN SEARCH *}
{* END ROW 1 SMALL*}

Link to comment
Share on other sites

I got this to work:

<div class="left text show-for-small">
  <a href="#" class="left-off-canvas-toggle button white tiny"><i class="fa fa-bars fa-2x"></i></a>
  <a href="#" class="button white tiny show-small-search"><i class="fa fa-search fa-2x"></i></a>
  <a href="#" class="right-off-canvas-toggle button white "><i class="fa fa-shopping-cart fa-2x"></i></a>
  <div id="small-basket-detail" class="hide panel radius small-basket-detail-container js_fadeOut"><i class="fa fa-check"></i> Added to Basket</div>
</div>
Link to comment
Share on other sites

I tweaked it just a bit, as the full size site had extra icons on it. Thank you for providing code that actually made sense. Here's the whole section, in case it would help someone else who might want to make the logo bigger, as I did.

<div class="small-12 medium-8 large-6 columns nav-boxes"> {* DIV CLASS  NAV BOXES*}
                  <div class="row"> {* ROW 1 SMALL*}
<div class="show-for-small-only text-center">
  <a href="#" class="left-off-canvas-toggle button white tiny"><i class="fa fa-bars fa-2x"></i></a>
  <a href="#" class="button white tiny show-small-search"><i class="fa fa-search fa-2x"></i></a>
  <a href="#" class="right-off-canvas-toggle button white "><i class="fa fa-shopping-cart fa-2x"></i></a>
  <div id="smallt-basket-detail" class="hide panel radius small-basket-detail-container js_fadeOut"><i class="fa fa-check"></i> Added to Basket</div>
</div>
<div class="right text show-for-medium-up">{include file='templates/box.basket.php'}</div>
		 {include file='templates/box.currency.php'}
		 {include file='templates/box.language.php'}
		 {include file='templates/box.session.php'}
</div> {* END ROW 1 SMALL *}
<div class="row hide" id="small-search"> {* HIDDEN SEARCH BOX THAT SHOWS AFTER ICON CLICKED ON SMALL *}
			<div class="medium-5 columns">{include file='templates/box.search.php'}</div>
</div> {* END HIDDEN SEARCH *} 
												
{* REST OF ROW 1 MEDIUM UP *}
 <div class="row show-for-medium-up">
 <div class="small-12 columns">{include file='templates/box.search.php'}</div>

</div>{*END ROW 1 MEDIUM UP*}
</div>  {* DIV CLASS  NAV BOXES*}         					

PS: You also fixed the tap target issue I was having with the Session icon, and I see you added verbage for item added to cart. Language that is missing from CC?
Link to comment
Share on other sites

"I see you added verbage for item added to cart. Language that is missing from CC?"

 

No, sorry. The code above is taken straight from the HTML delivered to my browser from your store -- then edited.

 

I did not look for the relevant template source code.

 

So, the phrase is good.

Link to comment
Share on other sites

OK - replaced the phrase with {$LANG.catalogue.added_to_basket}

But I noticed a typo I made, in case someone decides to copy the code.

<div id="smallt-basket-detail" class="hide panel radius small-basket-detail-container js_fadeOut">

Sometimes my hands jerk and I type characters I didn't mean to - should be small-basket-detail

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