The webpage content is not adjusting on zoom in/out or different resolution

HTML & CSS
1

Hi all again.

As I’ve been mentioning in my past Topics that I’m completely new to website designing so I need your help, and I always found you help is really precise on what I’m looking for. So Thank for all that again.

This the home page of the website http://www.ippbx.com.

It has a banner on the top and over that banner there is some Text which is changing via JS (I guess). The issue I’m facing is that when we see this on 100% or more zoom mode some Text goes down the banner and due to that you can not click any button under it. Until you zoom out or you scroll down.

I need to make all this adjustable with all type of browsers and all zoom In/Out modes.

I hope you got my point. Please excuse my English.

Thank You All agaian.

2

I’m still trying the decipher your code to see how the page layout is set up.
There are a few thing I find odd and question ‘why is it done like that?’
But the first thing I want to bring to your attention is html validation, there are a lot of errors, enough that you are bound to have some issues with the page.

Back to your layout. The header is set up in an odd way IMO. The .header-inner element is floated for some reason, this will disrupt the document flow and does not seem logical for a full width banner.
Oh, looking further, it seems you floated everything! The page is a string of consecutive100% width floats. Very unorthodox. :slight_smile:
Also in the banner you have an image, then the text overlaid via absolute positioning. It would be much simpler to have the image as a background to the element and let the text take its own space in the flow.
Avoiding things like unnecessary floats and absolute positioning will help maintain a natural document flow where one element follows the next and you avoid this kind of overlap.

3 Likes
3

@SamA74 Can you help me fix it? I’m really new with all this and I just got this template from somewhere and started working on it. I didn’t changed the code at all just changed the information.

4

Yeah i agree with @SamA74 on this your structure is completely odd and fixing it would require to rewrite a good chunk of your style and re-structure your html to work properly. A

1 Like
5

There may not be an easy fix. I think the root of the problem may be having chosen a poorly coded template.
So the options may be to find a better template, or re-code this one which may be a lot of work as both css and html need a lot of attention, which is a bit of a “big ask”.
Though with a bit more examination of the code, there may be a “quick fix” for the menu being overlapped. Though I would not be happy with so many errors in the code.

6

I understand what you said @SamA74, can you give me a quick fix to this issue and while I find someone to fix the whole code. I can not change the template now since the site is live and my organisation will not allow this change.

7

Basically this.

Quite obvious when you think about it. The height of the header is determined by the image, not the text (having absolute positioning). Yet on some “slides” the text is 5 lines at 50px font-size and 50px line-height, so simply will not fit in the box height.

Or limit the text to 2 lines only.
That may look better, as with the text changing, the page will jump about if the text sets the height.

8

change this style .header-inner>img to what i have below

.header-inner>img {
    width: 100%;
    min-height: 100%;
    position: absolute;
}

and you also need to remove the position absolute off the style reference .header-overlay

1 Like
9

I did the change @jgetner.

10

after this change banner is just gone…

11

you need to remove the position absolute off .header-overlay as well

12 
.header-overlay {
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    width: 100%;
}
13

No @jgetner Image is up and text is down

14

can you post your updated code on your so i can see what you have or dont have?

15

It should be exactly as described in post #8.

Swapping the position: absolute away from .header-overlay (the text part) onto .header-inner > img (the image part).
This will hand control of the header height to the text, rather than the image. I tried this in inspect and it worked.

.header-inner > img {
    width: 100%;
    min-height: 100%;   /* Added */
    position: absolute;   /* Added */
}
.header-overlay {
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    width: 100%;
    /* position: absolute;   Removed */
}
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.