How to get text next to image on mobile view and not under/above?

Site URL: https://atelierwit.com

Hii!

I've tried everything in the book but I am getting so frustrated with SS's responsive design, I basically just want my website to be displayed on the mobile version the same as it is on the desktop version.

I already applied this code to make the background header appear smaller on mobile but it doesn't look that great because the text underneath is now is huge compared to the image.

/* mobile-top banner */
@media screen and (max-width:767px) {
body.homepage article section:first-child {
    min-height: unset !important;
    height: 43vh;
}
}

Also I really want galleries in the original form (less height and more images displayed),  text / image blocks to appear next to each other like I designed it with the desktop site and my product pages to not stack underneath each other but have at least 2 columns. 

If it's not possible, any other tips to achieve the look that I want with the 3 main problems I have would be so helpfull aswell!

Thanks in advance 💗💗💗💗

Okay so update, I already tweaked some things and made the individual pics into a gallery which I added this code to to make it appear 3 columns on my homepage.

}
@media only screen and (max-width: 640px) { 

.gallery-grid-wrapper{ grid-template-columns: repeat(3, auto)!important;}

}

but I still need some help with my product pages (2 columns on mobile) (URL: https://www.atelierwit.com/collection/jewellery) and text / image to appear next to each other on the homepage if that is possible. (URL: https://atelierwit.com)

Here are some pics to help.

Also does anyone know if it is possible for the side menu of the product pages to appear on mobile? or have the header with logo and menu to always appear on mobile not just when scrolling up?

add this to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* text image side by side */
div#page-section-60fae73bd4f969540a9b29c8 .span-5 {
    width: 41.6667% !important;
    float: left !important;
}

div#page-section-60fae73bd4f969540a9b29c8 .span-6 {
    width: 50% !important;
    float: left !important;
}
/* products 2 columns */
	.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

It seams to work for the image / text on the homepage but on my product pages it is still 1 column instead of 2 (URL: https://www.atelierwit.com/collection/jewellery)   

On 7/25/2021 at 7:10 PM, laurdewit said:

It seams to work for the image / text on the homepage but on my product pages it is still 1 column instead of 2 (URL: https://www.atelierwit.com/collection/jewellery)   

With product page, use this code

/* Product 2 columns mobile */
@media screen and (max-width:767px) {
	.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

Thankyou!! this worked perfectly 🙂 Thought at first it didn't work because for some reason it doesn't show like that on my desktop but I open my website on mobile and it did show with 2 columns. this worked perfectly

On 7/27/2021 at 11:16 PM, laurdewit said:

Thankyou!! this worked perfectly 🙂 Thought at first it didn't work because for some reason it doesn't show like that on my desktop but I open my website on mobile and it did show with 2 columns. this worked perfectly

Yes. that code run on mobile only

Hi Tuanphan, can you help me with the code for one of my pages? 

URL: https://www.atelierwit.com/jewellery

I decided to change my productpages completely and design my own so I can add more pictures but now I have the same problem with all the images stacking under each other on mobile, can you help me get them in 3 columns? 🙂

6 hours ago, laurdewit said:

Hi Tuanphan, can you help me with the code for one of my pages? 

URL: https://www.atelierwit.com/jewellery

I decided to change my productpages completely and design my own so I can add more pictures but now I have the same problem with all the images stacking under each other on mobile, can you help me get them in 3 columns? 🙂

If you use Gallery, Summary, it will be easier.

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1627684313538_13078+.row .span-9 .span-3>div {
    width: 33.333% !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
}
div#block-yui_3_17_2_1_1627684313538_13078+.row .span-9 .span-3>div:nth-child(7) {
    clear: left !important;
}
}

On 8/1/2021 at 7:51 AM, laurdewit said:

Hi Tuanphan, can you help me with the code for one of my pages? 

URL: https://www.atelierwit.com/jewellery

I decided to change my productpages completely and design my own so I can add more pictures but now I have the same problem with all the images stacking under each other on mobile, can you help me get them in 3 columns? 🙂

Do you need to fix these?

Site URL – https://www.atelierwit.com/

1. (Desktop – Responsibility) Reduce space?

https://www.atelierwit.com/responsibility

2. (Tablet – Homepage) Increase text width?

https://www.atelierwit.com/

3. (Tablet – Homepage) Increase text width?

https://www.atelierwit.com/

4. (Tablet – Menu) Align social icon?

https://www.atelierwit.com/our-story

5. (Tablet – Our story) Increase text width?

https://www.atelierwit.com/our-story

6. (Tablet – Contact us) Email is cut into 2 lines.

https://www.atelierwit.com/contact-us

Yes please!

I also have another question, on my homepage (URL: https://www.atelierwit.com) I have a gallery called 'New in the Atelier' and I have put captions underneath but in SS I can't change the look of the text, I want them to be centered with the image and preferably to change the font to my set fontstyle for heading 4.

And I also can't get a second line for text underneath those captions to add the price of the products, do you know any way around this?

here a screenshot to help with the problem

On 8/5/2021 at 7:06 PM, laurdewit said:

Yes please!

 

I also have another question, on my homepage (URL: https://www.atelierwit.com) I have a gallery called 'New in the Atelier' and I have put captions underneath but in SS I can't change the look of the text, I want them to be centered with the image and preferably to change the font to my set fontstyle for heading 4.

And I also can't get a second line for text underneath those captions to add the price of the products, do you know any way around this?

Add this to Design > Custom CSS

/* New in Atelier */
[data-section-id="60fbf2ba6153830f9e7fa7ee"] {
p.gallery-caption-content {
    text-align: center;
    font-size: calc(~"(1.2 - 1) * 1.2vw + 1rem");
    font-family: Playfair Display;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
}
figure:nth-child(1) p:after {
    content: "$12";
    display: block;
}
figure:nth-child(2) p:after {
    content: "$25";
    display: block;
}
figure:nth-child(3) p:after {
    content: "$35";
    display: block;
}
figure:nth-child(4) p:after {
    content: "$55";
    display: block;
}
figure:nth-child(5) p:after {
    content: "$251";
    display: block;
}
figure:nth-child(6) p:after {
    content: "$2";
    display: block;
}
}

On 7/25/2021 at 9:33 AM, tuanphan said:

add this to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* text image side by side */
div#page-section-60fae73bd4f969540a9b29c8 .span-5 {
    width: 41.6667% !important;
    float: left !important;
}

div#page-section-60fae73bd4f969540a9b29c8 .span-6 {
    width: 50% !important;
    float: left !important;
}
/* products 2 columns */
	.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

 

Hi Tuanphan,

Can you please help me with the code to have my text next to my pictures on mobile version ? 
Please look at my 2 screenshots.
www.rewildoutfit.com

Thx so much !

On 12/30/2021 at 10:09 PM, AlexaeWittock said:

Hi Tuanphan,

Can you please help me with the code to have my text next to my pictures on mobile version ? 
Please look at my 2 screenshots.
www.rewildoutfit.com

Thx so much !

Add to Design > Custom CSS

/* Mobile text image */
@media screen and (max-width:767px) {
/* Sustainability */
div#block-yui_3_17_2_1_1638355007260_6407 .design-layout-card {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
/* weact */
div#block-yui_3_17_2_1_1639751610484_4986 .design-layout-card {
    display: flex !important;
}
div#block-yui_3_17_2_1_1639751610484_4986 .intrinsic {
    width: 45%;
    margin-right: 10px;
}
}

On 1/1/2022 at 10:30 AM, tuanphan said:

/* Mobile text image */
@media screen and (max-width:767px) {
/* Sustainability */
div#block-yui_3_17_2_1_1638355007260_6407 .design-layout-card {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
/* weact */
div#block-yui_3_17_2_1_1639751610484_4986 .design-layout-card {
    display: flex !important;
}
div#block-yui_3_17_2_1_1639751610484_4986 .intrinsic {
    width: 45%;
    margin-right: 10px;
}
}

Thank you very much it worked perfectly for my english pages but not for french pages :
ÉCO-RESPONSABLE : https://rewildoutfit.com/fr/ecoresponsable

and

MISSION : https://rewildoutfit.com/fr/mission

Can you please give me code for those ? Thx a lot !

On 1/2/2022 at 9:12 PM, AlexaeWittock said:

Thank you very much it worked perfectly for my english pages but not for french pages :
ÉCO-RESPONSABLE : https://rewildoutfit.com/fr/ecoresponsable

and

MISSION : https://rewildoutfit.com/fr/mission

Can you please give me code for those ? Thx a lot !

Use this new code

/* Mobile text image */
@media screen and (max-width:767px) {
/* Sustainability */
div#block-yui_3_17_2_1_1638355007260_6407, div#block-yui_3_17_2_1_1638355732667_5577 {
.design-layout-card {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}}
/* weact */
div#block-yui_3_17_2_1_1639751610484_4986, div#block-yui_3_17_2_1_1639752503097_5124 {
.design-layout-card {
    display: flex !important;
}
.intrinsic {
    width: 45%;
    margin-right: 10px;
}}}

On 1/4/2022 at 8:42 AM, tuanphan said:

Use this new code

/* Mobile text image */
@media screen and (max-width:767px) {
/* Sustainability */
div#block-yui_3_17_2_1_1638355007260_6407, div#block-yui_3_17_2_1_1638355732667_5577 {
.design-layout-card {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}}
/* weact */
div#block-yui_3_17_2_1_1639751610484_4986, div#block-yui_3_17_2_1_1639752503097_5124 {
.design-layout-card {
    display: flex !important;
}
.intrinsic {
    width: 45%;
    margin-right: 10px;
}}}

 

Super thx !!!

13 minutes ago, RickyRicky said:

@tuanphan

Hi, I'm trying trying to get this image box (QR code) and text box to be side by side on mobile, not stacked like they currently do. On mobile, when stacked, the QR code looks way too big. 

https://rickyanolik.com/american-red-cross-a-bloody-nightmare

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1659056764530_4224+.row+.row>.col {
    width: 50% !important;
    float: left !important;
}
}

Sounds like one has to solve Pythagorean's theorum to simply not have text be overlayed on an image in mobile. Squarespace is a disappointment.