Custom Code - Change Logo image for Mobile Devices - Brickstore

fullhouse-web

Hello All

I am working on a mock site using the JA Brickstore Template.

I have attached three images the first two (laptop-logo.jpg & mobile_phone.jpg) have been setup as per the existing > Template > Theme (Tab). The Third (change-logo_image-to_this_on_mobile_phones.jpg) is what I would like to achieve for mobile devices - @media (max-width: 767px)

How can I achieve this using custom code editor in the Templates > Edit Style page.

I would be grateful for any advice in this regard and thank you in advance for your reply

fullhouse-web

Please note that the images have been arranged in alphabetical order and therefore:
1. change-logo_image-to_this_on_mobile_phones.jpg
2. laptop-logo.jpg
3. mobile_phone.jpg

Just in case there is any confusion

Thanks Again!

saguaros

fullhouse-web
Hi,

The provided admin account doesn't work, could you check again?

And tell me the path of logo for desktop + mobile you want to use, I will check for you.

fullhouse-web

Apologies Saguaros

Amended the password above it should work now.

Paths as per your request:
Templates Edit Style > ja_brickstore - Light Gray > Theme
/images/joomlart/logos/tycom-long-fc-web-rect.png = Logo image
/images/joomlart/logos/tycom-icon-fc-web-sqr.png = Logo image "Small"

When the site is viewed on a Desktop/Laptop and the menu is open you see the second attached image in my previous post. This setup is acceptable and I would like it to remain as is.

When the site is viewed on a Mobile phone (menu is not open) you see the third attached image in my previous post. I would like this to be changed to show as per the first attached image in my previous post on mobile devices. (after reading previous posts I'm guessing it has something to do with - Custom Code - & - @media (max-width: 767px) -)

Thank you for your assistance and your prompt response.

fullhouse-web

Just to recap

For Desktop/Laptop the Following:
/images/joomlart/logos/tycom-long-fc-web-rect.png = Logo image
/images/joomlart/logos/tycom-icon-fc-web-sqr.png = Logo image "Small"

For Mobile devices the Following:
/images/joomlart/logos/tycom-long-fc-web-rect.png = Logo image
/images/joomlart/logos/tycom-icon-fc-web-rect.png = Logo image "Small"

aman204

fullhouse-web You may check now. Have added another logo image after changing toggle to "on" for "Enable small logo" in T3 framework settings. Ref: Screenshot

Kindly ensure to clear your browser cache if changes dont reflect

fullhouse-web

Dear Amon204

I think we are almost there, did not take me long to figure out which images needed to go where thank you for your help. When viewing the site I couldn't help but notice that the logos where not centered horizontally.

Attached please find changes to be be made. Thank you again for your assistance it is greatly appreciated.

aman204

fullhouse-web When viewing the site I couldn't help but notice that the logos where not centered horizontally.

Try add this to custom.css file and adjust margin value accordingly for get it right for horizontal and vertical alignment (margin-left for horizontal and margin-top for vertical)

@media only screen and (max-device-width: 480px){.logo-control .logo-img-sm{margin-left:10px !important;margin-top:40px !important;}}

fullhouse-web

Dear Amon204

Took a bit of figuring out ending in success!

Your help regards this matter was invaluable and greatly appreciated.

aman204

fullhouse-web You are welcome 🙂

Kindly let us know if all queries to relative topic have been resolved so as to mark the thread as resolved or need further assistance on the same