Content items not responsive sizing down right

BB Theme
1

I have noticed that the items on pages are not re-sizing down right for responsive and now fulling the smaller devices all the way like they should.

If i have 4 ,5 or 6 items all side by side as the site sizes down the items do not start to go under each other they just get shrunk down smaller and smaller till it is so small it is hard to read till it then breaks down to single items for tall cell view.

But for landscape cell view many of the items then do not fill the screen like they are set to.

I see this also in many of the sites people have posted in the new sites them have done area.
Is this being looked at to be fixed as it makes using anything over 3 side by side areas look very bad on some devices.?

I see on other responsive themes that if you have say 6 side by side as the site is sized down it breaks many times like.

6 will then drop to tow rows of 3 then it will drop to 3 rows of 2 as it gets smaller then on down to single items.

In the BB theme it stays 6 all the way down till it breaks down to single. This makes it very hard to make a usable full wide site using a lot of areas like 4 to 6 of them.

Here is a screen shot of how after it breaks down to single it is not expanding out to full wide on landscape cell or using a tablet.
But you can see a single wide area dose expand out like it should but none of any side by side areas are expanding out on my sites or many others i have looked at.

null

null

2

Hey Edward,

Yes, using 6 columns would cause some issues without a bit of mobile setting modification. For example, if you go to the advanced tab of the first three columns and set something like 33% for each on small devices, the layout will then keep to three columns. Feel free to take a look at those settings and they should be able to get you what you are looking for. Hope that helps and let us know if we can assist further!

Best,
Billy

3

Ok i see i set the three side by side to 100% for cell and 50% for tablet and that works right now pushing down the 3rd area when its time for tablet landscape view.

Except when it still goes to single area i still get the extra white space on both sides like in my photo up above on all of the side by side items.
Why are they not expanding out wide like the top single area. Any single only area fills the screen like it should but any side by sides do not when sized down they have this white space on each side for tall tables and landscape cell views?.

I just started using CSS Hero and now with the different device previews i can see what they look like now when working on them for each device size and layout that is what showed me the extra white area…

The images and 3 area are plenty wide to fill the devices here is what they look like side by side but still then they shrink down they have the white space on each side until it gets to tall cell phone size then it fits right?
Is this another setting i can change someplace to fix this?

null

4

Hey Edward,

On mobile view, the columns are given a maximum width of 400px, which is more than enough for most mobile phones(320px). If you can share the URL of the site, we can probably provide a CSS to override that.

Ben

5

Ok the site is live now but i have a ton more to do on it this is a new design layout i am just starting to use i spent a lot of time on this home page.
Using CSS hero for the first time to make the fonts look better and each device view look better.
http://www.chicagocarkeys.com/

Still have the problem on a Tablet tall view or landscape view on cell phone. i get all this extra white area space when the side by side area go down to one they are not expanding to fill the area.

Iam also getting a drift or when you move the site with your finger on my Androde phone the full site slides right and left as it is not fitting in the screen area 100% its like it is 120% wide not 100?

What do you think can be done i plan to use this look and layout a lot.
Thanks

null

6

Hey Edward,

Using the CSS snippet below should fix the columns not expanding on mobile view.

@media (max-width: 768px) {
    .fl-col-group .fl-col-small {
        max-width: 100%;
    }
}

As for the site sliding left/right issue, this is caused by some of your contents being joined together by non breaking spaces. These are being considered one word so the browser doesn’t break them. Check the screenshot below for reference. You can simply delete the space between the words and manually add a space by hitting the space bar.
http://imgur.com/9QdzZ0N

The paragraph on the screenshot above is what’s causing the problem but there are other instances on your homepage.

Ben

7

Ok thanks that fixed it and the text that must be from me copying some text from his other website never would of thought of that.

8

Ok going in to edit the text the extra stuff is not showing up in the text edit area for me to fix?

null

9

Hey Edward,

You won’t be able to see it there as it’s being interpreted as a space. What I usually do is paste the text first to a Notepad, where special characters aren’t supported, then copy it again and paste it to the editor. Give that a shot and let us know how it goes! :slight_smile:

Ben