How to Align Brooklyn Theme Map Content on Desktop Only

Technical Q&A
1

On jimmyscannabis.ca I added “left: 480px” on line 3811 of theme.scss.liquid so that the white boxes with location information content would appear on the right side of the photos (the default puts it on the right side). The issue is that it messes up the mobile version, and I cannot see the content overlay the pictures when not on desktop.

This is the link to the locations page: https://jimmyscannabis.ca/pages/about-us

Any solution regarding how I can maintain the current look on desktop and fix the mobile experience would be greatly appreciated!

2

HI @glorygut ,

Please add the below CSS at the end of your theme.scss file.

@media(max-width:991px){
.index-map-section .map-section__content{
left:0;
}
}

3

I added it, but still appears to be the same?

4

@glorygut , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss and paste this at the bottom of the file:
.map-section__content{
        left: 0 !important;
    }

[id*='MapSection']{
    position: relative;
}

.map-section__wrapper{

   justify-content: flex-end !important;
}

As a worthwhile technical addendum, you shouldn’t be using left to align it to the right since the element is not with an absolute position, and yes relative and using flexbox. This would make the code not be fully responsive and look broken on some devices. You can simply add a flex-end property to it to push it to the right.

The code above will work on both mobile, tablets and desktop. It will also fix some other stuff that was misaligned because of the previous code.

diego_ezfy_0-1624681392602.png
diego_ezfy_0-1624681392602.png1222×835 236 KB

Kind regards,
Diego

1 Like
5

Hi @glorygut ,

The given CSS will work for the mobile device. I have added it in inspect elements and check it’s work fine.

6

Thanks so much for the detailed reply! Worked great.

I assume it would be a good idea to delete the “left:480px” that I initially added above?

7

@glorygut

You’re welcome. You can delete if you wish, but the "left" code is now being overwritten by the code I sent you above, so it won’t make too much of a difference.

Kind regards,
Diego