Web Dev Needed

[battletoad]

had a look on my phone. In landscape mode, some of the text in your li's (.row1 .span4) go out of the boundary of the width, specifically the word "Installations". Half of the last "N", and of course the "S".

Iirc, this phone has width 640px if you set the viewport meta tag.

 

[acidrain]

Yea it seems to be a javascript hook called touchtouch.

If you add the following to your head:

<link rel="stylesheet" href="css/touchTouch.css">
<script src="js/touchTouch.jquery.js"></script>

EDIT: Remember to put this after the other jquery links.

And then this before the </body> tag:

<script>
    $(function(){
        $('.list7>li>div>a').touchTouch();
    })    
</script>

It should work.

Not working, must be something else, I updated the page online so you can see that those edits have been added

 

[acidrain]

Cool, do you want the images to display below each other like in the gallery or in a 2x2 grid?

2x2 or 3x3. On my ultra its currently showing 3 in a row, not sure how the response works ( i.e you do 2x2 and on bigger phones it will be 3x3 and visa versa if you do 3x3 )

 

[Frikkenator]

Not working, must be something else, I updated the page online so you can see that those edits have been added

Sorry just change that last bit to:

<script>
    $(function(){
        $('.list7>li>a').touchTouch();
    })    
</script>

There is no div between the li and a in this case.

 

[acidrain]

had a look on my phone. In landscape mode, some of the text in your li's (.row1 .span4) go out of the boundary of the width, specifically the word "Installations". Half of the last "N", and of course the "S".

Iirc, this phone has width 640px if you set the viewport meta tag.

Which page are you referring to as I don't seem to see any issues when my sony is in landscape ( although being the ultra its not really a cellphone, more a tablet so viewing could be different )

 

[acidrain]

Sorry just change that last bit to:

<script>
    $(function(){
        $('.list7>li>a').touchTouch();
    })    
</script>

There is no div between the li and a in this case.

No words... not even legend is befitting at this point.

 

[battletoad]

Which page are you referring to as I don't seem to see any issues when my sony is in landscape ( although being the ultra its not really a cellphone, more a tablet so viewing could be different )

Ah ok. Galaxy S4, on your main page, /devsite

EDIT: Its not really that major, but I suppose you can add this...

.span4 figcaption p {
overflow: hidden;
text-overflow: ellipsis;
}

...so that if the text overflows, it cuts it off and replaces the end of the text with 3 dots, signifying that there's more. Tbh I haven't tried that css without "white-space: nowrap" yet, but from what I see you want the lines to wrap if there are multiple words.

Further edit: or what frikkie said few posts later

 

[Frikkenator]

2x2 or 3x3. On my ultra its currently showing 3 in a row, not sure how the response works ( i.e you do 2x2 and on bigger phones it will be 3x3 and visa versa if you do 3x3 )

Okay set list7 to width:100% and margin: 0px. And set the margin on list7 li to margin: 0px 10px 0px 0px;

 

[Frikkenator]

Ah ok. Galaxy S4, on your main page, /devsite

Will give screenshot in a sec...

Yea I see it as well.

acidrain you can add font-size:20px; to the class .list1 li a figure figcaption > p:first-child under @media (max-width: 767px) (line 1168).

This will decrease that font size for mobile devices.

 

[acidrain]

Okay set list7 to width:100% and margin: 0px. And set the margin on list7 li to margin: 0px 10px 0px 0px;

Done and looking pretty.

I believe that pretty much sums it all up, just to do some testing on other devices.

Once again thank you for sacrificing most of your evening, it really is appreciated.

 

[acidrain]

Ah ok. Galaxy S4, on your main page, /devsite

EDIT: Its not really that major, but I suppose you can add this...



...so that if the text overflows, it cuts it off and replaces the end of the text with 3 dots, signifying that there's more. Tbh I haven't tried that css without "white-space: nowrap" yet, but from what I see you want the lines to wrap if there are multiple words.

Further edit: or what frikkie said few posts later

Any Better?

 

[battletoad]

Done and looking pretty.

I believe that pretty much sums it all up, just to do some testing on other devices.

Once again thank you for sacrificing most of your evening, it really is appreciated.

hey its cool. Maybe I'll bring a little site here for testing as well!

Nice responsive site btw. I like how the bg moves around during resize, you don't see that a lot.

Any Better?

Yep, and still in keeping with the design of large fonts for mobile

 

[acidrain]

If anyone knows Frikkenator, give him a bells next time you see him. Truly a legend ( took days of agony away in a few hours )