Page 1 of 1
Center Logo on Small View
Posted: Sat Feb 05, 2022 2:47 pm
by tessthepup
Hi Guys,
I am looking for a bit of inspiration on how to center the store logo on a small screen (testing on a Samsung Galaxy S10+ and chrome browser)
I have the following setup
1. Store logo content module width set to 8
2. Search box content module width set to 4
3. Message module content width set to 12 but set to only be visible on small screen.
I have tried d-flex justify-content-center but nothing changes
Any ideas would be appreciated.
Re: Center Logo on Small View
Posted: Sat Feb 05, 2022 3:30 pm
by Kofod95
Not sure and unable to test right now, so a blind chickens' guess:
text-center or mx-md-auto ?
//Daniel
Re: Center Logo on Small View
Posted: Sat Feb 05, 2022 3:37 pm
by Tanya
I am not sure whether it is correct or not.
I use "text-align:center". It works for me.
Re: Center Logo on Small View
Posted: Sat Feb 05, 2022 3:42 pm
by tessthepup
Kofod95 wrote: ↑Sat Feb 05, 2022 3:30 pm
Not sure and unable to test right now, so a blind chickens' guess:
text-center or mx-md-auto ?
//Daniel
Thanks for the reply Daniel but unfortunately neither worked
Re: Center Logo on Small View
Posted: Sun Feb 06, 2022 10:38 am
by tessthepup
ok I am stumped
I have tried every bootstrap centering code I could find but cannot get the logo to center on mobile view
Code: Select all
<div class="col-sm-<?= (int)MODULE_CONTENT_HEADER_LOGO_CONTENT_WIDTH ?> cm-header-logo mb-4 align-self-center">
<a href="<?= $GLOBALS['Linker']->build('index.php') ?>"><?= new Image('images/' . STORE_LOGO, [], htmlspecialchars(STORE_NAME)) ?></a>
</div>
Re: Center Logo on Small View
Posted: Sun Feb 06, 2022 10:39 am
by tessthepup
Tanya wrote: ↑Sat Feb 05, 2022 3:37 pm
I am not sure whether it is correct or not.
I use "text-align:center". It works for me.
oops did not see this reply but going to try it anyway, thanks
Re: Center Logo on Small View
Posted: Sun Feb 06, 2022 10:46 am
by tessthepup
tessthepup wrote: ↑Sun Feb 06, 2022 10:39 am
Tanya wrote: ↑Sat Feb 05, 2022 3:37 pm
I am not sure whether it is correct or not.
I use "text-align:center". It works for me.
oops did not see this reply but going to try it anyway, thanks
Unfortunately it did not work theway I need it to.
I want the logo on full screen size to the left of the header and centered on mobile view
Re: Center Logo on Small View
Posted: Sun Feb 06, 2022 11:22 am
by ecartz
See
https://stackoverflow.com/a/50745227/6660678
The "text-center text-md-left" on the container is the thing that would make it text-align: center on small screens and left on medium screens. You might also find that you want text-sm-left, text-lg-left, or even text-xl-left instead.
Re: Center Logo on Small View
Posted: Sun Feb 06, 2022 12:29 pm
by tessthepup
ecartz wrote: ↑Sun Feb 06, 2022 11:22 am
See
https://stackoverflow.com/a/50745227/6660678
The "text-center text-md-left" on the container is the thing that would make it text-align: center on small screens and left on medium screens. You might also find that you want text-sm-left, text-lg-left, or even text-xl-left instead.
No matter what I try the logo just will not center on small devices
I have another header module which I created that displays a message in the header under the logo but only on small view and this centers perfectly.
Code: Select all
<div class="col-sm-<?php echo $content_width; ?> header_message text-center text-md-center cm-header-message pt-2 d-block d-sm-none">
<?php echo HEADER_MESSAGE_TEXT; ?>
</div>
Re: Center Logo on Small View
Posted: Wed Feb 16, 2022 9:57 pm
by MyGamesShop
Have you tried changing in Product Listing 'Products Per Row' settings to see if this is affecting what you're expecting?