Jump to content

Displaying code blocks as 2 columns in mobile view

Recommended Posts

Site URL: https://www.thewordlady.co.uk/

Ok I'm totally out of my depth on all types of code and I'm winging it massively. I have a couple of key issues that I'm really hoping someone can help with? 

1. I found a way to use code blocks to create an image hover effect where the text disappears on hover and a new image is displayed (most examples have the text appear on hover, but I wanted it the other way round). Anyway, I like the way the 6 code blocks look on desktop/tablet – 2 rows / 3 columns but I can't get them to display as 2 columns for mobile (instead of stacked on top of each other). I would like 3 rows / 2 columns for mobile.

2. I've messed about with the original html code I found and now can't work out how to keep my text relative to the size of the image – so have set it at 30px or something but I think this means it's not contained inside the image on some screens and I want it to just get larger or smaller depending on the size of the image in whichever viewport is being used. 

I hope that makes sense? 

Just to give an idea of the level you're dealing with here – I don't really know the difference between html and css and am just faffing around and hoping stuff works.

This is the css I've got and I honestly don't even know if I need all this or if I've just left random bits in from various different Google results...

 

.overlay-image {
  border: 1px solid #fff;
  padding: 0px;
  width: 100px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0), 0 4px 6px 0 rgba(0, 0, 0, .3);
}

/* Main container */
.overlay-image {
position: relative;
width: 100%;
}

/* Original image */
.overlay-image .image {
display: block;
width: 100%;
height: auto;
}

/* Original text overlay */
.overlay-image .text {
color: #fff;
font-size: auto;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:80%;
}

/* New overlay on hover */
.overlay-image .hover {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}

/* New overlay appearance on hover */
.overlay-image:hover .hover {
opacity: 1;
}

.overlay-image .normal {
transition: .5s ease;
}
.overlay-image:hover .normal {
opacity: 0;
}
.overlay-image .hover {
background-color: rgba(0,0,0,0.5);
}

.container {
  position: relative;
  text-align: center;
  color:white; }

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

Thanks in advance to anyone who can help me with this because I'm seriously losing brain cells trying to figure it out. If anyone can recommend a really great coding for beginners course I'd really appreciate it. 

Thank you. 

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

You can't change current layout to 2 items/row on mobile.

about - portfolio

digital - testimonials

print - contact

However, to do this, you also need to adjust a bit of items. Not sure how to explain it, I am looking for instructions from Squarespace, to see how they explained ...

--

I see you used Code Block to create hover.

You can create this effect with Poster Block, or Image Inline Block.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
4 hours ago, qwerty456 said:

I don't think I can create the effect with poster/imagine inline in a way that shows the word on the first image but changes the image/removes the word for the hover, can I? 

Hover effect with Image Blocks. https://turquoise-asparagus-ylha.squarespace.com/image-box-06?password=abc

Password: abc

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.