Jump to content

Help with Mobile Only Editing

Recommended Posts

Hi all, I could use a bit of help with some mobile editing. I know just enough CSS to be dangerous. I can figure out the right code to use, but can't figure out which sections to call out on the Spuarespace site I'm working on. I'd like these icons (that are uploaded as PNGs to be more proportionately sized on mobile. The text is also a bit small. I like the way it looks on desktop, but mobile gets weird and I can't figure out a way to edit the two individually. Any help would be greatly appreciated.

Here's the link to one of the pages. However, this element is on each of the pages underneath the Services dropdown. If it's a different call out for each page, please advise.

https://www.abbsolutelyorganized.com/bathrooms-closets 

Thank you so much!

 

 

Screenshot 2023-01-24 at 11.44.58 AM.png

Screenshot 2023-01-24 at 11.47.32 AM.png

Link to comment
  • Replies 3
  • Views 357
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 1/26/2023 at 7:44 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-63bdac74493f6a3a593a8132 .image-block {
    width: 50%;
    margin: 0 auto;
}
}

 

That's beautiful! Thank you so much! With that I'm able to identify which section to call out on the other pages. My only other question is, do you know how I can increase the size of the text a little on those sections. I'd like it to be 1.5x to 2x larger than it is now. 

Link to comment
On 2/8/2023 at 3:30 AM, nikkig127 said:

That's beautiful! Thank you so much! With that I'm able to identify which section to call out on the other pages. My only other question is, do you know how I can increase the size of the text a little on those sections. I'd like it to be 1.5x to 2x larger than it is now. 

Use this new code

@media screen and (max-width:767px) {
div#page-section-63bdac74493f6a3a593a8132 .image-block {
    width: 50%;
    margin: 0 auto;
}
div#page-section-63bdac74493f6a3a593a8132 * {
	font-size: 28px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.