Jump to content

[Resolved] Foundation Logo Size?


Recommended Posts

Just started playing with V6 and I'm stumped already. The logo image seems to be getting automatically resized/shrinked to around half the size of the actual image in the Foundation skin.

I've searched through the css for the classes and id's surrounding it in main.php but some of them don't appear to even be in any of the css files and despite trying to add them myself I can't seem to figure out how to stop the image from being resized :unsure:

Link to comment
Share on other sites

That is certainly a fairly obnoxious choice of assigning screen real estate - 25% to 33% of the screen width to the logo and the rest to the Search Bar.

You can try this:

Starting at line 58:
<div class="row marg-top" id="top_header">
  <div class="small-4 large-3 columns">
    <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"></a>
  <div class="small-8 large-9 columns nav-boxes">
    <div class="row" id="nav-actions">

Change from class="small-4 large-3 columns" to class="small-6 large-7 columns".
Change from class="small-8 large-9 columns" to class="small-6 large-5 columns"

Div blocks that share the same screen row need to add up to 12 columns for each size. The edits above gives a bit more than half the row width to the logo.

The Foundation CSS assigns the following rule to all images: height:auto;max-width:100%;

The Foundation skin is peculiar in that everything will automatically resize to be a percentage of the browser's screen width (called a 'viewport') at all times (as best it can), and reflow the layout at certain widths.

This action is called being 'responsive' and is key to having the one skin fit desktops, tablets, and smart phones viewports.

You can try adding a rule to cubecart.default.css: #top_header img {min-width:400px;} but be sure to see what that looks like on your phone.

Link to comment
Share on other sites

  • 3 weeks later...

Join the conversation

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

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.

  • Create New...