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

Changing image order on mobile

Question

Posted (edited)

Site URL: https://potato-sphere-g3k8.squarespace.com/

Hi! I was wondering how to change the order of images on my first page on mobile. I attached the photo of what I would like on mobile: my image, then the text and button. Is there a way to hide the second image below? 

Wesbite: naonow.com Password: naonow

 

image.thumb.png.143b1f07d8ec90cdd50f65dd6df97e94.png

 

On computer I'd like to hide this image I duplicated for mobile view:

image.thumb.png.ab35891b47026afc032b4dca1540d82c.png

Thanks so much!! @tuanphan

Edited by rachelt

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 0
Posted (edited)

From what I understand you want your image to appear only once, both on mobile and desktop, right?
On Desktop the image is supposed to be on the right side of your text, while on mobile, its supposed to be above the text, correct?

This should be easily possible if you drag the image into the text so the insertion point doesn't appear as a line but rather as a greyish rectangle inside the text.

 

 

Edited by 8B39C8

Share this post


Link to post
  • 0

Yes, I would like the image only once on mobile and once on computer! Except it won't order properly on mobile mode unless I duplicate the picture-- therefore, how do I hide it on computer mode? and then hide the other on mobile? Thanks!!

Share this post


Link to post
  • 0

Add to Home > Design > Custom CSS

/* hide image on desktop */
@media screen and (min-width:768px) {
[data-section-id="5eb8354530a3d76767ae2553"] {
    display: none;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Thank you! Amazing, that worked! Now how do I hide the second duplicate image in mobile mode only? @tuanphan I only want the first top one to show in mobile mode! Is there also a way to decrease the space size between the picture and the caption "active learning.." so that the spacing is the same as this other photo below?

 

image.thumb.png.448e29c660e78fec3bfc856df35a178c.png

 

image.thumb.png.90a9ae941f6ff6c15d04e0215116f6c9.pngSpacing:

 

Share this post


Link to post
  • 0
21 hours ago, rachelt said:

Thank you! Amazing, that worked! Now how do I hide the second duplicate image in mobile mode only? @tuanphan I only want the first top one to show in mobile mode! Is there also a way to decrease the space size between the picture and the caption "active learning.." so that the spacing is the same as this other photo below?

 

@media screen and (max-width:767px) {
div#block-5308c219f381007ee373 {
    display: none;
}
[data-section-id="5eadeeafed72103d3af36c56"] .content-wrapper {
    padding-top: 0 !important;
}
div#block-71ea98765b68363ece36 {
    padding-top: 0 !important;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Would this work if I wanted to rearrange the image (of the guy at his desk) to place it inbetween dry needling and corporate massage on Mobile only?  

Desktop is correct  and I have attached an image, Mobile loads as attached image

https://www.melbmyo.com.au/

Thanks

screencapture-melbmyo-au-2020-05-19-19_16_43.png

Mobile MelbourneMYO.jpg

Share this post


Link to post
  • 0
2 hours ago, LeeLee said:

Would this work if I wanted to rearrange the image (of the guy at his desk) to place it inbetween dry needling and corporate massage on Mobile only?  

Desktop is correct  and I have attached an image, Mobile loads as attached image

https://www.melbmyo.com.au/

Thanks

The way you arranged the 2 images / text below makes the order of it incorrect (no code needed to solve this).

Hold and drag the text (text 3 & text 4) up below image 3 & image 4, until you see a black horizontal line below the image (horizontal line width = image width)

Done.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...