Jump to content

Resizing and aligning text and images for mobile site 7.1

Recommended Posts

Site URL: https://www.spreadlovetours.com/4-hour-foot-subway

Hi everyone, this is a tour website I am creating for a client and I cannot figure out how to format the images and text properly, specifically on this page (there are multiple pages like this but if I can figure out how to do it on one I can figure out all of them) where the clock, sneaker, dollar sign, and statue of liberty icons are that have text next to them. On the desktop it looks fine, but when it is moved to mobile, the images become very large and the text either gets pushed down to the bottom of the page or its left-justified underneath each image. How can I re-format this in CSS so the images are smaller and aligned with the text? I'll add a photo of what it looks like on the mobile site. 

IMG_1415.PNG

IMG_1414.PNG

Link to comment
  • Replies 1
  • Views 279
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Add to Design > Custom CSS

/* Mobile align text icons */
@media screen and (max-width:767px) {
div#page-section-622baafe821a9e4bd3a1cb86 .span-1 {
    width: 18% !important;
    float: left !important;
}
div#page-section-622baafe821a9e4bd3a1cb86 .span-3 {
    width: 70% !important;
    float: left !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.