Jump to content

Responsive Design

Recommended Posts

Site URL: http://www.ballinagroup.com/our-work

We recently noticed that our site on a tablet screen size doesn't resize the text boxes so they float under each other. The responsive design works fine for phone screens but I can't get it to work for tablet screens. I've tried a few different CSS codes to make this work and nothing has so far.

Attached are 3 screen shots of desktop mode, tablet mode, and phone mode when I'm in editing so you can see what it looks like. If anyone can help that would be great.Desktop.thumb.jpg.3042e6bb5ab81f63c83dfcbe83b429a8.jpgTablet.thumb.jpg.01e2a3a673b479a684a5b89cc7c7f1e5.jpgPhone.thumb.jpg.80dc0d8f046f3fead31876bfc263f78d.jpg

Link to comment
  • Replies 2
  • Views 361
  • Created
  • Last Reply

Add to Home > Design > Custom CSS

/* text responsive on tablet */
@media screen and (min-width:768px) and (max-width:991px) {
div#page-5b9a941cb8a045cb6ca5f6e6 .span-12>.row:nth-child(3) .span-2 {
    width: 33.33%;
}
div#page-5b9a941cb8a045cb6ca5f6e6 .span-12>.row:nth-child(3) .span-10 {
    width: 66.67%;
}
div#page-5b9a941cb8a045cb6ca5f6e6 .span-12>.row:nth-child(3) .span-10 .span-2 {
    width: 50%;
}
}

image.thumb.png.66095c49862d0531fc3e6698d74c7a85.png

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

Archived

This topic is now archived and is closed to further replies.

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