Responsivness issue

[maik282]

Hey there

I have a problem with the responsiveness on my page.

i try to have the circle on each page on the same height and size.

http://bssag.maikmadoerin.com/angebot/
http://bssag.maikmadoerin.com/karriere/

here it is somehow not on same level:
http://bssag.maikmadoerin.com/

unfortunately the screen size of the circle gets messed up on different screens - see here:

Screenshot

Screenshot

Screenshot

circle are getting bigger when i decrease screen size and it is floating around somewhere else

i tried to play around with @media only but couldn figure it out.

could you please assist here?

thanks so much

Maik

[ruenel]

Hello Maik,

Thanks for writing in! I have inspected your page and it appears that you are using classic image element with an inline css width: 80%. The width of the image will always be 80% of the total container width. This is also the reason why it becomes bigger is some screen sizes. To prevent this from happening, you will need set a maximum width which might be in pixels. For example; your will add width: 80%; max-width: 320px;. This means that the image width will be 80% of the container with a maximum total width of 320 pixels only.

I would recommend that you use the v2 image element instead. With this new element, you will have more controls over the image styling without the need of adding an inline element css. To learn more about the new Image element, please checkout our documentation here:

• https://theme.co/docs/image

Hope this helps.

[maik282]

ok wow that helps.

Anoher issue i have is i set the height to 100 vh on some pages but it still keeps scrolling on the page. so i thought because of the top padding i have (45px) i need to use the height as:
height: calc (100vh-45px)

but it is not working

any idea there?

[christian]

Hey @maik282,

The page scrolls because the section is not the only element that occupies the space on the screen. There’s the header too. What you need to deduct is the header height like calc(100vh - 70px) where 70px is the header height which you can normally get from Theme Options > Header > Navbar Top Height.

The best tool you can use though is the browser’s element inspector. Using this, you can see the actual rendered height and it’s actually 1px taller because of the header border so you should actually deduct 71px for your case to be perfect.

For really small screens, you might need to change those values per screen size so you’re going to need to use media queries. What’s important to remember is to take into account what’s taking space in the screen be it the header, images in the header and content, etc.

Just note that custom coding is beyond the scope of our theme support. If you have questions regarding media queries or CSS in general, you need to forward them to other forums.

Hope that helps.