Hi all!
I’ve got a slider in my hero section with 3 circles contained in a column. I’m struggling to resize and keep proportions from tablet view to mobile in portrait.
Is it worth the hassle or should I replace it with a screen printed image?
I like CSS if at all possible. But it really depends on your use case. I couldn’t see the circles loaded at this time…maybe you are actively moving things? I did notice your background images are huge in file size…you might want to condense those.
Sorry, I forgot to mention that there are 2 slides in the hero section. The circles are on slide 2/2
Good point about the images. I’ll try to compress them a bit more
Okay, I just didn’t see arrows or buttons so I missed the slider…work in progress 
No right or wrong here but again preference. If the circles are important or you want interaction then I’d say work with the CSS but you might want to think about the best structure for your divs and the layering. Combining the circles and background might work but could be tough visually on mobile devices as the text could become unreadable.
That’s a super vague answer, I realize, but I hope it helps.
Hi, there. Cool site. There are a few issues I see right away that will cause problems in the way the circle cascade. Your heirarcy is good but you have the contents in the small and large circles set to a set height and width. This is why they are not changing nicely. I suggest setting the height and width to auto and using relative positioning to get them to where you want them. That way they will behave better.
Also, a lot of your images are absolutely massive. It took me 30 seconds to load the page on my 65mbps connection! For those banner images I would size them to 1500-2000px wide in photoshop and export for web as a jpeg with a high quality setting and then send them through tinypng.com to get them even smaller.
You have a google tag, which I’m guessing is analytics? If so, that doesn’t need to be there, there is a pane in the site settings for your analytics tab. Removing that should clean up your site a bit.
You also have multiple nav bars? Not sure whats going on there.
I would be glad to help with any of those issues once you get the site further along 
1 Like
@jdesign Thanks for your thoughts, I’ll have a shot at working with CSS and if it’s still dancing everywhere I’ll resort to the screen print.
@DFink What settings should I use to position the circles nicely? I used 300 x 300 and a 200px radius to get the shape. I’m not really sure how relative positioning works.
This site is a bit like jenga. I’ve iterated fast and cut corners in some places. The nav bar seems to be hanging in there. If I had more time I’d fix it properly.
Do you recommend to always use .jpeg images for the web? I’ve put everything through as .png and used tinypng.com to scale down. Seems like it’s not enough 
Always use JPEG unless you need transparency. Your circles can be a set size but the content that overlays should be relative positioning with their height and width to auto. Push the relative positioning tab and play around, you’ll get it.
@Dfink I’ve scaled the images down, but couldn’t nail the CSS for the circles.
I’m resorting to plan B – is there any way to create different backgrounds for one slider? It doesn’t seem to register a different class across the slides.
Hi @kiki, it is possible to add a different background for each slide, is that what the goal is? If so, just add a different class to each slide.
Yes, I suggest using a common class for all slides and then adding a subclass that changes the background image. That way if you want to change the size, padding or any other global parameter, you can do it on the master class instead of having to do it a bunch of times.
@cyberdave Thanks, the classes work now! I accidentally deleted the overlay so it kept changing the background across both slides.
@DFink I replaced the CSS with images which are difficult to tame.Lesson learned, don’t put 3 circles next to each other expecting them to fit 
– I’ve noticed that it’s okay to edit in portrait mode without it affecting the rest.
I’ll sit down to fix this properly (and probably break the circles across more slides).
Thank you again for all your replies!
1 Like
If you want further help getting those circles to look right let me know. I was in there and it isn’t very hard. I suggest using a div to wrap each one in so that they can shift based on themselves and not the larger parent container.
1 Like
Yeah, I have no idea how to scale it properly. I’m happy to pay someone to fix this. If you’re up for it please get in touch!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.