Heading & Subheading container disappeared (refresh theme)

[RasmusSeraphim]

The container (is that the right name?) constraining the headline and sub-heading (on yada.day)disappeared or expanded for no apparent reason, messing with my stuff again 😞 (see attachment for how it looked before)

Help, please!

And more generally - this is the third time that while building this Shopify website with the Refresh theme, some website element just suddenly disappeared without me having even changed anything seemingly related to it. This is starting to have me wonder if it's a good idea to use it. Any input on why this may be the case and if it's a theme issue or a shopify issue etc would be really helpful...Thank you!

[Anshul_arora]

Hello @RasmusSeraphim 

Hope you are doing great.

As I understand that you are looking to fix the content of heading & sub heading in the banner section of your shopify store.

I have looked through your store and see the current situation of the banner section of your store https://prnt.sc/jQKyDplKmy-X and also viewed the previous view of your store in the attached image.

You have to change max-width in this code https://prnt.sc/OQfjnymnOQjz to get the older view of the banner image text.

As you can see when I temporarily change the code of your store https://prnt.sc/mOMSXNMbliv4 , then the heading and subheading are fixed in the banner section.

So, you have to change the code in your style sheet, to permanently fix this issue.

.slideshow__text>* {
max-width: 52% !important;
}

I hope it helps.

Please let me know in which of the other elements you are specifically facing issues. So that I can review and provide specific solutions to resolve the problem.

However, the website will behave different for different devices we have to adjust it accordingly

Thank you.

[RasmusSeraphim]

Anshul, thank you so much for taking the time!

So...this worked to address the symptom, but I am hoping you may also have some insight on the underlying problem.

The code you had me fix was originally not limited I believe, and it made the heading and subheading look very similar to now before your fix, see my help question then: https://community.shopify.com/c/shopify-discussions/how-to-add-a-line-break-in-main-headline-refresh... 

So I applied the same fix as you suggested now, setting it to 88%, which made it look correct, like the screenshot in this post - how can it be that now I have to reduce it to 52% to achieve the same that 88% achieved a few days ago? How did the total that this is a percentage of increase without my doing so? (I assume that's what happened)

Why does this theme (or shopify?) make often such inexplicable changes? I have never had this before with any other builder and would love some input on this, so I can make an informed decision if I need to change the theme or the platform...Help please!

[RasmusSeraphim]

Unfortunately, the weird change I described in my last response did not affect mobile - which means that applying your solution completely ruins the mobile display, see screenshots - which means that even to solve this symptom I have to get to the root issue...help please...anyone?

[Anshul_arora]

Hello @RasmusSeraphim 

The desktop looks great now, i believe. As i mentioned above, you will have the change things for each devices. Each device like laptop, mobile, tablet have their own screen size and the content of your website need to be modified accordingly.

This doesn't have automatically, so you will need to write CSS code for each screen size.

@media only screen and (max-width: 600px) {
h2.banner__heading.inline-richtext.h0 {
font-size: 35px;
}
}

This small code piece will fix the heading part on your mobile device. So you will need to write similar code for other areas.

Whatever you write anything between this media query:

@media only screen and (max-width: 600px) {
--- write any CSS here
}

that will be applied on mobile devices only.

So, if you are able to manage a little CSS code, using the media query is best way to fix your sections on different devices.

Hope this helps.

Best

Anshul

[RasmusSeraphim]

Thank you for your time to help me, I really appreciate it.

I do have to admit that I am surprised, actually have a hard time accepting that in 2023 one of the most used themes on the biggest ecommerce store platform I need to write css code for every website section to work on mobile. The themes I used to work with on other platforms did that for me about 10 years ago. Are you saying this is common on shopify? Also, the fix you gave me I now realized didn't just affect the mobile version that way, but also desktop, see the screenshot below. 

Something is just not adding up here to me 😞

Can someone help me understand?

[Anshul_arora]

Hello @RasmusSeraphim 

The theme you are using is responsive by default but when we do create layouts in any theme, sometime we need to manage the CSS code according to our content and requirements.

As i am able to check on your page, it seems like the section on the main banner which says - "Love. Without. Ceasing." has the same class as the section you shared screenshot of.

So you can override this with the parent class:

.banner__text.rte {
max-width: 100%!important;
}

and that should fix the section which you shared, on desktop.

Hope that helps.

Thanks

[sobhaneopolispl]

Nice Blog Was Use Full Reading  It  By Sobha Neopolis