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
This is how I see it on my mac with scrollbar
Does it have to do with when the breakpoints of the responsive queries happen?
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.
#sonictooth:after{
content:"";
display:table;
clear:both;
}
#sonictooth > img {
float: left;
}
.prd-icon-info {
display: block;
overflow:hidden;
padding:35px 0 0;
}
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.
wow I thought inline-block elements just made a width of their own
and not have to put one manually.
So could I say width:100% on
.prd-icon-info
or is it not necessary?
You seem to have misunderstood 
inline-block elements are shrink to fit.
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.
ohhh ok I see 
Yeah but the amount of content inside each tab is different
and I did try the first solution but not all of them floated.
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?
Are you talking about the Dental site? A particular page on that site?
It seems to me like it should behave nicely in a laptop. I don’t see any scrollbars as I narrow Firefox’s window.
the whole site, im viewing it on safari and chrome on my
13" laptop and it give scollbars. I mean viewing it full browser width.
What operating system? What version of the browsers? What is the screen resolution of the laptop?
I don’t see a problem using desktop Chrome on a PC.
MacBook Pro OS X Yosemite 10.10.5
Safari 8.0.8
Latest version Chrome
13.3 inch (1280 x 800)
oops I forgot to mention that I also viewing on a macbook
This is what I see: and it is full screen
Cool, thanks.
Hopefully, a Mac user will be along who can help zero in on the cause of the problem that you see.
lol ok.
scrollbars?
safari scrollbars only appear when you start to scroll.
That sounds weird. How does one know that he needs to scroll horizontally or vertically if there are no scrollbars? Context???
very true I guess only Apple Developers can answer that 
Yes, by default, although you can choose otherwise in the System Preferences.
In that case, csosa, I would definitely enable visible scroll bars, especially while developing a site. 
The only downside is that it affects the page behavior—if I remember rightly, changing overall widths etc. 
Hmmmm. Do you think that would really be significant if the page were fluid?.. intending to be responsive? Might it throw off the calculation of breakpoints? (I wouldn’t think so, but…)
