Three huge problems! Design Help. How can this happen?!

Design help General
1

Hello, Webflow forum!
I have recently added a new project in my life and its bringing footvolley balls to my country.

In my website I am having three problems:

  1. The H1 titles I have with the numbers react to the size and hight in the Desctop breakpoint but not in the other breakpoints. Why is this happening?

  2. The voting grid I have does expand and the contact section just pops over it and I can not tell why.

  3. I have 4 icons in the button of my page for contacts and in the published website just the Facebook icon shows up…

Please help me guys it would be much appreciated.

Here is my site Read-Only:
https://preview.webflow.com/preview/mikasa-tu-kasa?utm_medium=preview_link&utm_source=dashboard&utm_content=mikasa-tu-kasa&preview=0222102da59eab29a3c02e112aec51fc&mode=preview
([how to share your site Read-Only link][2])

here is the website link: https://www.mikasatukasa.com/

2

Hi @Ben_Liberty,

  1. The numbers in your H1 headings are set using vw sizing, which is based on the width of the viewport. The size will change at different screen sizes. More on CSS Units.

  2. The contact form is an a div (.section.swiper-section-7) that’s set to fill the entire viewport - that div is sitting on top of the entire page. This could break other elements on the page, but it looks to me like you can remove the height declaration from that div.

  3. It looks like you need to declare a width for the .image-17 class. Again, I’m not sure what else that might break in your layout but you could start there. You’ll likely also need to adjust the width and/or flex properties of the parent element to get the social links to display cleanly.

I hope that helps!

1 Like
3

Hello blakelam,
thank you very much for answering!
I still don’t know why the H1 headings don’t react when i change the sizing, but you did help me fix the div and break elements in problem 2.
I appreciate it very much!!

4

Ah, I misunderstood what you meant about the H1 headings.

There’s custom code (below) in the ‘media break points’ Embed element that’s overriding the styles applied to the ‘sliderh2’ class in the Typography panel.

@media screen and (max-width: 1600px) {
.sliderh2 {
font-size: 200px;
@media screen and (max-width: 1366px) {
.sliderh2 {
font-size: 150px;
@media screen and (max-width: 500px) {
.sliderh2 {
font-size: 15px !important;

  }
}
1 Like
5

AAAAAhhhhhhhh now i see!!!
You are amazing really thank you very muchhh!!!

1 Like