Hello, I have a website that is expansive and it does not
scroll but when I view on my 13" MacBook Pro it scrolls. is it
possible for it not to do that and fit in the browser like in larger screens
or is it unavoidable? Website
The problem is that you have an inline image followed by an inline-block element which has no width set.
Inline-block is shrink to fit element which means it will be as wide as it needs to be. That means if you have a line of text then that line of text will not wrap until the block is at the maximum that it can be stretched to which is achieved by the element dropping to a full line (just as an unbroken string of letters would move to the next line when it couldn’t fit).
You can do a number of things here.
The simplest solution is to float the image and just let the text wrap around.
That avoids the issue altogether and as the window narrows the text will wrap nicely.
Alternatively you could set a width on the inline-block element (.prd-icon-info) of about 55% and that will also keep the element alongside the image but you would then need to remove the rule from your smaller media queries because that changes the smaller screen displays a little.
When you use inline-block or floats (or absolute elements) be aware that they are shrink to fit and that they will take up as much room as is needed which eventually means they need the whole line (the full width of the parent). Therefore when you have text in floats or inline-blocks then they will want the whole row if there is a lot of text so you either need a width or think of better ways to achieve what you want.
They do not need a width but will take a with of their content.
If the content they contain is longer than the available space on that line then the whole block will drop to the new line and take up the full width of that new line if required.
If you give 100% width to an inline block element then nothing can sit next to it which means there is no point in it being inline-block in the first place as all you have is effectively a block element. Its the same as saying width:100% on a float which means nothing can be alongside so why float it?
That’s the reason I said give a smaller percentage width (55%) which means that the element will still fit on the line and sit next to the floated image (and if the floated image was also in percent you could match both exactly). However the first solution I gave is the best and avoids all these issues. Use the right tootl for the job in hand.
Think of inline-block as just another word of text. If that word is very long then what happens? It wraps to the next line if there is not enough room on the current line.
Also another issue I have is when I view my website on my laptop
its not the same width as in a desktop. I have to scroll in laptop view
of the website …Does it need different queries? why doesnt it fit within the browser
regardless of the size of the screen?