Jump to content

Change logo size?

roundzero
 Share

Recommended Posts

roundzero Newbie

roundzero

Posted
  • Author
Posted

My file is allredy big. I search the code and found out that in my view logo is att 33% of the row and then comes the search field block. Can I just edit these numbers to make the search field smaller and logo bigger? I tried to and it seems to work but do I have to edit in more than one place becsuse of the different views?

Link to comment
Share on other sites
roundzero Newbie

roundzero

Posted
  • Author
Posted

Hi again,

Tested different apporouches to the problem. The topic you linked to didn't work for me. Removing the maximum width as descreibed increased the logo but messes up my page. The logo is then to big. If I edit the global.css instead. And increase the

 .col-sm-4, header .row #header_logo {
    width: 50%; }

instead of 33.33% it looks much better. Logo is bigger. However anything above 50% will break the row in two and it looks bad again. The cart will move and it just looks messy. Can't figure out how to edit the files to move things around as I wan't. 1.6 files is maybe to advanced for me :S

Link to comment
Share on other sites
roundzero Newbie

roundzero

Posted
  • Author
Posted

Hi again, and thanks for your help vekia!

Changing what I did wasn't so smart after all now that I read more about how the bootstrap works. Even though it looked good in my view, col-sm-4 is used for when u have 3 columns on one row and should therefore allways be left at 33.33333%.

I acctually want to change more in the layout so I will read more on this topic first.

 

However if someone else just want the bigger logo, vekias solution with removing maximum width seems to works as long as you size your logo correctly for your page.

Link to comment
Share on other sites
  • 1 month later...
Beans Newbie

Beans

Posted
Posted (edited)

Hi again, and thanks for your help vekia!

Changing what I did wasn't so smart after all now that I read more about how the bootstrap works. Even though it looked good in my view, col-sm-4 is used for when u have 3 columns on one row and should therefore allways be left at 33.33333%.

I acctually want to change more in the layout so I will read more on this topic first.

 

However if someone else just want the bigger logo, vekias solution with removing maximum width seems to works as long as you size your logo correctly for your page.

 

I tried this, but removing the maximum width messed up some other images on the site (non-responsive?)

 

What finally worked for me was making the image the size I actually wanted in my editing software and uploading that, then adding this code to global.css:

 

#header_logo .img-responsive {
  max-width: 150% !important;
}

I'm hoping this won't have any weird side effects I haven't noticed yet. :P

Edited by Beans (see edit history)
  • Like 1
Link to comment
Share on other sites
  • 4 weeks later...
amcm112 Newbie

amcm112

Posted
Posted

Have a problem with logo size...

 

I ever try to modify the value in :

 

.col-sm-4, header .row #header_logo {
    width:30.33333%; }

 

when I change from 33 to another value my logo goes bigger and looks great.. but the fotter is a complete mess .. how I can make my logo bigger and my fotter still in good place...!  Pls Help!

Link to comment
Share on other sites
RCP90 Newbie

RCP90

Posted
Posted

Hi,

 

 

I am experiencing a similar issue with a new store. I uploaded a logo, which is only being displayed as about 60% of original size. I tried changing various parts of global.css but it is still displayed smaller.

 

One strange thing i noticed is that if the browser is minimized to tablet/mobile size it displays the larger logo.

Link to comment
Share on other sites
  • 2 months later...
wanderer72 Newbie

wanderer72

Posted
Posted

 

I tried this, but removing the maximum width messed up some other images on the site (non-responsive?)

 

What finally worked for me was making the image the size I actually wanted in my editing software and uploading that, then adding this code to global.css:

 

#header_logo .img-responsive {
  max-width: 150% !important;
}

I'm hoping this won't have any weird side effects I haven't noticed yet. :P

 

Unfortunately, it seems to have side effects in the mobile version, as it stretches out of the rest of the page...

 

Any way this can be rectified, as it otherwise does the trick?

 

thanks

Link to comment
Share on other sites
Beans Newbie

Beans

Posted
Posted (edited)

Unfortunately, it seems to have side effects in the mobile version, as it stretches out of the rest of the page...

 

Any way this can be rectified, as it otherwise does the trick?

 

thanks

 

You can write CSS code that is specifically for a particular screen size.

 

So you might have something like:

@media (max-width: 450px) {       /*Change max-width to the maximum mobile screen size*/
  #header_logo .img-responsive {  
    max-width: 100% !important;   /*Change 100% to whatever percent/px size looks good*/
  }
}

You could copy this code for all the different screen sizes you want to accommodate.

Edited by Beans (see edit history)
Link to comment
Share on other sites
wanderer72 Newbie

wanderer72

Posted
Posted

You can write CSS code that is specifically for a particular screen size.

 

So you might have something like:

@media (max-width: 450px) {       /*Change max-width to the maximum mobile screen size*/
  #header_logo .img-responsive {  
    max-width: 100% !important;   /*Change 100% to whatever percent/px size looks good*/
  }
}

You could copy this code for all the different screen sizes you want to accommodate.

 

Many thanks, this works well!

Link to comment
Share on other sites
  • 3 weeks later...
  • 1 month later...
wwesps Newbie

wwesps

Posted
Posted

Many thanks, this works well!

 

This doesn't work for me. I have tried all solutions in this discussion post & end up with either of following issues:-

 

(1) web version definitely shows the logo increased but then mobile/tablet version gets messed up. Logo stretches out completely.

 

(2) In web version the LOGO increases but it overlaps the nearby SEARCH and CART icons.

 

What is the correct solution for increasing the LOGO size & reduce length size of: SEARCH and CART icons nearby so all 3 fit together in same line.

 

Thanks,

Vick

Link to comment
Share on other sites
Beans Newbie

Beans

Posted
Posted

This doesn't work for me. I have tried all solutions in this discussion post & end up with either of following issues:-

 

(1) web version definitely shows the logo increased but then mobile/tablet version gets messed up. Logo stretches out completely.

 

(2) In web version the LOGO increases but it overlaps the nearby SEARCH and CART icons.

 

What is the correct solution for increasing the LOGO size & reduce length size of: SEARCH and CART icons nearby so all 3 fit together in same line.

 

Thanks,

Vick

 

How well do you know CSS? You can adjust the size of the logo with CSS code for the mobile/tablet versions (based on the screen size) as seen in the above posts. For instance, I use a screen size of 767px for phone-specific code and 1199px and 991px for horizontal and vertical tablet sizes.

 

You can control the size of the search and cart elements the same way.

 

If you don't already have a web developer plug-in for your browser I'd highly recommend it.

Link to comment
Share on other sites
wwesps Newbie

wwesps

Posted
Posted

Thanks Beans.

 

(1) So your suggestion is: Simply adding below code to global.css should work & Similarly, keep adding for various max-width sizes... right?

 

@media (max-width: 450px) { /*Change max-width to the maximum mobile screen size*/
#header_logo .img-responsive {
max-width: 100% !important; /*Change 100% to whatever percent/px size looks good*/
}
}

 

 

(2) Can  you also point respective code elements for SEARCH and CART too in global.css ?

 

Thanks,

Vick

Link to comment
Share on other sites
Beans Newbie

Beans

Posted
Posted

Thanks Beans.

 

(1) So your suggestion is: Simply adding below code to global.css should work & Similarly, keep adding for various max-width sizes... right?

 

@media (max-width: 450px) { /*Change max-width to the maximum mobile screen size*/

#header_logo .img-responsive {

max-width: 100% !important; /*Change 100% to whatever percent/px size looks good*/

}

}

 

 

(2) Can  you also point respective code elements for SEARCH and CART too in global.css ?

 

Thanks,

Vick

 

(1) Yes, that's where I would start.

 

(2) My cart has a class name of "shopping_cart" but it's in the blockcart.css stylesheet. My search has an ID of "search_block_top" and is in blocksearch.css. You can, of course, also wrap these styles in as many @media(max-width) blocks as you need.

 

You are welcome to check out my global stylesheet: https://coffeecityusa.com/themes/ccusa/css/global.css

Link to comment
Share on other sites
  • 4 weeks later...
Beans Newbie

Beans

Posted
Posted

How do I change the size of the hover for jumping to the store home page by clicking on the logo? It still seems to be fixed at 287px, or thereabouts. IOW, I can click on the leading part of the logo, but not the tail (see attached).

 

URL: http://www.examaids.com/examaids/

 

 

Hi Walrus,

If you use the Web Developer plug-in for Chrome you'll have an easier time. Using it I found out that the "hoverable" part of your logo is a div with an ID of "header_logo". If you can find (or create) a rule for this ID in your CSS stylesheet you should be able to change the size.

Link to comment
Share on other sites
wwesps Newbie

wwesps

Posted
Posted

Hi Walrus,

If you use the Web Developer plug-in for Chrome you'll have an easier time. Using it I found out that the "hoverable" part of your logo is a div with an ID of "header_logo". If you can find (or create) a rule for this ID in your CSS stylesheet you should be able to change the size.

 

Hi All- I had the following 2 issues resolved last month: (1) Increase size & Move position of logo (2) Increase/Decrease size of Search-bar/Shopping-cart button on Front Page.

 

For some reason, updates to the CSS are NOT working now...

 

I know following CSS files need to be updated to achieve the above (1) & (2):-

public_html/modules/blocksearch/blocksearch.css

public_html/modules/blocksearch/blockcart.css

 

I already had the following:-

i) Entire CCC was always set to "No"

ii) Cleared Cache (by clicking "clear cache" button on top right corner)

iii) "Force Compilation" is selected

iv) "Cache" is set to --> No

 

What am I missing here?

 

 

Tx

 

 

 

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...