Product pictures have a slight offset (Dawn Theme).

[AndreyGutthard]

Hey everyone,

I'm using the dawn theme,

and i've been going for this design on mobile screen: (grid around product cards)

current result and code in base.css: URL: https://derstacheldraht.com/

It happend after i added a left border to every second product card.

@media (max-width: 767px){
slider-component {

padding: 0 !important;
}
@media only screen and (max-width: 767px) {
.collection .grid__item:nth-child(2n) {
border-left: 1px solid #B2B2B2 !important;
}

.collection .grid__item {

border-bottom: 1px solid #B2B2B2 !important;
}

.grid {
column-gap: 0 !important;
row-gap: 0 !important;
}

@media screen and (max-width: 767px)
{
.collection .grid__item {

max-width: calc(51% - var(--grid-mobile-horizontal-spacing) / 2) !important;

}

@media only screen and (max-width: 767px) {
.collection.section-template--19601307271433__ad5e0019-3f09-4f9a-8532-550e31bfbf7f-padding {
border-top: 1 !important;
}
ul#Slider-template--19601307271433__ad5e0019-3f09-4f9a-8532-550e31bfbf7f {
margin-top: 0px !important;
}
@media screen and (max-width: 767px)
{
.collection {

border-top: 1px solid #B2B2B2 !important;
}

Every help is greatly appreaciated.

[Dawood_Mirza_]

Hi @AndreyGutthard,

You are having this issue due to 
@media only screen and (max-width: 767px) {
.collection .grid__item:nth-child(2n) {
border-left: 1px solid #B2B2B2 !important;
}

To resolve this, you just need to Either add border to all like
@media only screen and (max-width: 767px) {
.collection .grid__item {
border: 1px solid #B2B2B2 !important;
}

OR

add border-right to left column also
.collection .grid__item:nth-child(2n-1) {
border-right: 1px solid #B2B2B2 !important;
}

BR 
Dawood Mirza

[AnneLuo · Accepted solution]

Hi, @AndreyGutthard 

Replace your code here with .collection .grid__item:nth-child(2n) .card__content

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[AndreyGutthard]

Hey @AnneLuo,

Thank you so much for replying to fast.

I added .card__content to my code. It sadly just removed the left border on every second card:

[AnneLuo]

Hi. Unfortunately. I did not see the code I provided on the website. Where did you add it to? 

If you will unable to implement the same then I'm happy to do this for you, let me know.
If possible, I can help you directly modify it.

[dreamtechzone_5]

Hello AnneLuo!

I am free trialing Be Your Theme on Shopify. I want to center the copy-right text, payment icon, and currency in the footer section. I want to put copy-right text in red marked place, the payment icon in yellow marked place, and currency in green marked place. Mobile mode is ok. One more thing, The heading text is too small, I want to keep the text large. Is it possible? Please help me. Thank you.
Theme: https://themes.shopify.com/themes/be-yours/styles/beauty/preview

[AnneLuo]

Hi. Of course. Need to add custom code to modify the style and layout of the footer.

[dreamtechzone_5]

Great. Can you provide that code and instructions? I will appreciate you. Thank you very much.

[AnneLuo]

It is impossible to provide code in a short period of time. Your requirements are a bit complex, it will take about half a day to a day to complete.

[dreamtechzone_5]

Ok, thank you. I appreciate you.

[AnneLuo]

If you need me to help you implement this feature, please let me know.

[AndreyGutthard]

@AnneLuo,

I only replaced the specific code line that you mentioned in your first reply:

My orinial custom code starts right below the vanila code of dawn theme Asset<base.css:(market yellow):

@media (max-width: 767px){
slider-component {

padding: 0 !important;
}
@media only screen and (max-width: 767px) {
.collection .grid__item:nth-child(2n) .card__content
border-left: 1px solid #B2B2B2 !important;
}

.collection .grid__item {

border-bottom: 1px solid #B2B2B2 !important;
}

.grid {
column-gap: 0 !important;
row-gap: 0 !important;
}

@media screen and (max-width: 767px)
{
.collection .grid__item {

max-width: calc(51% - var(--grid-mobile-horizontal-spacing) / 2) !important;

}

@media only screen and (max-width: 767px) {
.collection.section-template--19601307271433__ad5e0019-3f09-4f9a-8532-550e31bfbf7f-padding {
border-top: 1 !important;
}
ul#Slider-template--19601307271433__ad5e0019-3f09-4f9a-8532-550e31bfbf7f {
margin-top: 0px !important;
}
@media screen and (max-width: 767px)
{
.collection {

border-top: 1px solid #B2B2B2 !important;
}

How would you go about modifiying it direclty?

[AndreyGutthard]

@AnneLuo ,

Im sorry

I made a small mistake. I forgot the "{" after your suggested code.

It works beautifully now.!!

Correct code: 

@media (max-width: 767px){
slider-component {

padding: 0 !important;
}
@media only screen and (max-width: 767px) {
.collection .grid__item:nth-child(2n) .card__content {
border-left: 1px solid #B2B2B2 !important;
}

.collection .grid__item {

border-bottom: 1px solid #B2B2B2 !important;
}

.grid {
column-gap: 0 !important;
row-gap: 0 !important;
}

Thank you so much!

[AnneLuo]

I'm glad to hear that the solution worked well for you.
If you require any more help, please don't hesitate to reach out.