CE Phoenix Cart Forum

drtom wrote: ↑Fri Jun 27, 2025 4:14 am Any suggestions on how to get the image to scale better?

drtom wrote: ↑Fri Jun 27, 2025 4:14 am Actually, I'd like to also enlarge the navbar itself a bit, which might help with the scaling issue.

heatherbell wrote: ↑Fri Jun 27, 2025 4:51 am To my eye, your Logo on the larger screen looks ideal but you could try using your image editor software to make it bigger and upload it again (though there may then be unintended consequences on small screen.)

heatherbell wrote: ↑Fri Jun 27, 2025 4:51 amIf that is not what you want, you can experiment with CSS sizing rules to target that specific image.

heatherbell wrote: ↑Design wise, to my eye, I would use image editing software to give all product images a canvas size of the same aspect ratio so contents of product cards line up in a more visually pleasing way.
Maybe, also, increase vertical spacing (margins) between main elements like between the carousel and Featured Products to give visual 'breathing space'.

heatherbell wrote: ↑As a customer, I might expect to see the 'Account' over on the right next to the 'Cart' in the Navbar.

heatherbell wrote: ↑Otherwise, it's good to see someone making a good job of branding and making their site stand out and memorable.

drtom wrote: ↑Fri Jun 27, 2025 10:36 pm Does not scale well, if at all (it seems)

drtom wrote: ↑Fri Jun 27, 2025 10:36 pmThe Navbar Content Placement of the 'Account' is currently Center and the 'Shopping Cart' is Right. If I change that to both Right they both scoot left.

drtom wrote: ↑Sun Jun 29, 2025 12:08 am I gather then, that there's not much I can do to get the cart and hamburger button well positioned on smaller devices, other than to minimize the logo enough to allow them to fit on the right

drtom wrote: ↑Sun Jun 29, 2025 12:08 amwell, there may also be the possibility of
eliminating the option of opening an account and leaving only the cart

drtom wrote: ↑Fri Jun 27, 2025 10:36 pmIf I change that to both Right they both scoot left.

.offcanvas-body ul.navbar-nav:last-of-type {
  margin-left: auto !important;
}

heatherbell wrote: ↑Tue Jul 01, 2025 7:03 amSpent ages to achieve a solution to this that did not require a Navbar module to be installed on Left, did not require changes to core code and did not result in unintended consequences.
So, try this in your user.css:

Code: Select all

.offcanvas-body ul.navbar-nav:last-of-type {
  margin-left: auto !important;
}

Anyway, seems to work on this demo https://psiwebsites.com/1103/ but have a test.

drtom wrote: ↑Thu Jul 03, 2025 3:40 amI then did as I speculated earlier and added a few media queries to the CSS so as to adjust the logo accordingly.

heatherbell wrote: ↑Thu Jul 03, 2025 7:17 amGlad you achieved a solution.
In the spirit of community 'give and take', why not share that solution in case it might help future readers.

/*Adjust logo size according to screen size.*/
@media screen and (max-width:320px){
.navbar-brand img{width: calc(6rem + .5vw);
                  height:auto;
                  margin-top:0;
                 } 
}

@media screen and (min-width:321px) and (max-width:480px){
.navbar-brand img{width: calc(12rem + 2vw);
                  height:auto;
                  margin-top:0;
                 } 
}

@media screen and (min-width:481px) and (max-width:600px){
.navbar-brand img{width: calc(15rem + 2vw);
                  height:auto;
                  margin-top:0;
                 } 
}

@media screen and (min-width:601px) and (max-width:770px){
.navbar-brand img{width: calc(18rem + 2vw);
                  height:auto;
                  margin-top:0;
                 } 
}

@media screen and (min-width:771px) and (max-width:860px){
.navbar-brand img{width: calc(20rem + 3vw);
                  height:auto;
                  margin-top:0;
                 } 
}

@media screen and (min-width:861px){
.navbar-brand img{width: calc(25rem + 4vw);
                  height:auto;
                  margin-top:0;
                 } 
}