How can I adjust header sizes and mobile view layout for custom content?

Store Design
1

Hi there

I need some help to adjust my 2 sections with custom content on my page.

The top header is smaller than the content header and would like to change that by switching size between those 2.

secondly, the layout looks great on the desktop view, with the image on one side and the text on the other side but on mobile view the picture gets really small with this layout so was wondering if I could change, only for mobile view, to get the image centered under the top header and the text centered below it?

Thank you

opiesie.com

password: labrea

Kofiem_0-1629976327556.jpeg
Kofiem_0-1629976327556.jpeg1809×803 125 KB

Kofiem_1-1629976344075.jpeg
Kofiem_1-1629976344075.jpeg1080×2340 191 KB

Kofiem_2-1629976360727.jpeg
Kofiem_2-1629976360727.jpeg1080×2340 192 KB

2

Hi @Kofiem ,

@media only screen and(max-width:749px){
.custom__item.custom__item--text.custom__item--162868760852d99bf5-0.small--one-half.medium-up--one-half.align--center, .custom__item.custom__item--image.custom__item--16288353696e480a51-1.small--one-half.medium-up--one-half.align--center {
    width: 100%;
    -webkit-flex: auto;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Note : If your store is having this media already (for mobile version) then no need to add whole code . Only just add css in that media ie 749px(already exist)

3

thank you @oscprofessional but unfortunately it didn´t work :disappointed_face:

4

Hi @Kofiem ,

It will work. Check your media queries. I have defined you in note.

oscprofessional_0-1633334061371.png
oscprofessional_0-1633334061371.png1357×735 125 KB

Share your content header screenshot