Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


laurdewit

Question

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 💗💗💗💗

Edited by laurdewit
Link to comment
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

12 answers to this question

Recommended Posts

  • 0

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?

Screenshot 2021-07-24 at 13.21.09.png

Screenshot 2021-07-24 at 13.20.58.png

Screenshot 2021-07-24 at 13.48.29.png

Screenshot 2021-07-24 at 13.48.48.png

Link to comment
  • 0

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

atelierwit.com-01-min.png

2. (Tablet – Homepage) Increase text width?

https://www.atelierwit.com/

atelierwit.com-02-min.png

3. (Tablet – Homepage) Increase text width?

https://www.atelierwit.com/

atelierwit.com-03-min.png

4. (Tablet – Menu) Align social icon?

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

atelierwit.com-04-min.png

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

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

atelierwit.com-05-min.png

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

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

atelierwit.com-06-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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?

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...