Center Logo on Small View

[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.

[Kofod95]

Not sure and unable to test right now, so a blind chickens' guess:
text-center or mx-md-auto ?

//Daniel

[Tanya]

I am not sure whether it is correct or not.

I use "text-align:center". It works for me.

[tessthepup]

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

[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>

[tessthepup]

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

[tessthepup]

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

[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.

[tessthepup]

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>

[MyGamesShop]

Have you tried changing in Product Listing 'Products Per Row' settings to see if this is affecting what you're expecting?