Web Dev Needed

acidrain

acidrain

Executive Member
Joined
Jan 7, 2007
Messages
6,966
Reaction score
1,765
Location
At a computer
Hi all,

Looking for someone familiar with HTML5 and CSS to assist with 2 issues I'm having on a website I'm busy with for my company.

To start off, I purchased a template off templatemonster. It is coded using HTML5 and CSS and furthermore is a responsive site.

I have pretty much completed the whole site except for 2 sections which I am having problems with. The first issue is the gallery where I have decreased the thumbnail size which looks great on a pc but on a mobile device the horizontal spacing is way too big ( so the user ends up scrolling forever ) and would prefer it to be "tightened" up. Now I've figured that this would be basic CSS editing, but given the site is responsive, I have no clue what to specifically edit in the CSS as this is only a problem on mobile devices.

The second issue is I would like to have a services page but there is no default page for what I want, so I've had to resort to editing one of the other standard pages to try get what I'm looking for ( which I sort of have ) but again with it being responsive, I have once again hit a road block where it just doesn't come out right on mobile devices and pc version needs to be edited a bit as well.

I have found a service which would convert my site into a MotoCMS template for $75 but the problems are finding a new host that supports it and the fact that it's not really a site that changes continuously ( except for adding photos to the gallery which is very easy ).

I will be more than happy to pay the above equivalent to anyone who could sort my problems out for me ( if it's worth their while of course ).

Just PM me and I can provide more specific info.
 
If it's just CSS try the following before paying someone:

Open the site in Chrome
Open Chrome's Developer Tools
Top right on the dev tools there is a button "Show Drawer"
When the drawer opens select Emulation
Select a mobile phone of your choice and click Emulate
You may have to refresh the page, but the responsive CSS should kick in
You can now use Chrome's developer tools to see what the CSS is that you have to change.
 
Frikkenator said:
If it's just CSS try the following before paying someone:

Open the site in Chrome
Open Chrome's Developer Tools
Top right on the dev tools there is a button "Show Drawer"
When the drawer opens select Emulation
Select a mobile phone of your choice and click Emulate
You may have to refresh the page, but the responsive CSS should kick in
You can now use Chrome's developer tools to see what the CSS is that you have to change.
Click to expand...

Thanks, didn't notice chrome could do that. So I assume I have found the culprit, see screenie: https://www.dropbox.com/s/offtpz71n57nomd/screen1.png

It is referring to a class: maxheight2 but I see no reference of that specific class in the CSS

Frikkenator said:
Alternatively paste the URL or PM me the link and I'll have a look, it doesn't sound like a major issue.
Click to expand...

I'll upload it to a folder on the webhost and give url once done.
 
Last edited:
acidrain said:
Thanks, didn't notice chrome could do that. So I assume I have found the culprit, see screenie: https://www.dropbox.com/s/offtpz71n57nomd/screen1.png

It is referring to a class: maxheight2 but I see no reference of that specific class in the CSS
Click to expand...

From the screenshot, you should be looking for: li.maxheight2 in the CSS. Alternatively, use the "Find" option in your text editor to search for maxheight2. It may also be possible that this piece of CSS exists in the bootstrap file/s itself, which will then require a CSS override.
 
noob_saibot said:
From the screenshot, you should be looking for: li.maxheight2 in the CSS. Alternatively, use the "Find" option in your text editor to search for maxheight2. It may also be possible that this piece of CSS exists in the bootstrap file/s itself, which will then require a CSS override.
Click to expand...

Done the "Find" through all the CSS files and no match for li.maxheight2, maybe its something hardcoded into the template or the response which is why its beyond my simple knowledge, and hence willing to pay as our current site is in flash which doesn't work on any mobile devices ( thanks adobe ) so would like to get it completed pretty soon.

Also I really don't mind paying so long as it gets accomplished seeing as going the template route has saved a fair bit of money as compared to going back to our initial web developer who honestly i think was over-payed.

Btw: Uploaded the "site" www.verticallogic.co.za/devsite/

Just to add on to problem 2. Here's is a screen of what I would like the services page to look like ( albeit still have css problems. https://www.dropbox.com/s/8t89fvupz50mkkn/services1.jpg

and this is how it turns out on a phone: https://www.dropbox.com/s/tpfckxqigws21vj/services2.jpg ( where I would rather like the services box first and then the picture block at the bottom )
 
Last edited:
acidrain said:
Done the "Find" through all the CSS files and no match for li.maxheight2, maybe its something hardcoded into the template or the response which is why its beyond my simple knowledge, and hence willing to pay as our current site is in flash which doesn't work on any mobile devices ( thanks adobe ) so would like to get it completed pretty soon.

Btw: Uploaded the "site" www.verticallogic.co.za/devsite/

Just to add on to problem 2. Here's is a screen of what I would like the services page to look like ( albeit still have css problems. https://www.dropbox.com/s/8t89fvupz50mkkn/services1.jpg

and this is how it turns out on a phone: https://www.dropbox.com/s/tpfckxqigws21vj/services2.jpg ( where I would rather like the services box first and then the picture block at the bottom )
Click to expand...

What phone did you emulate, looks fine on my side?
 
sorry yes, kinda started with the menu first and then the pages.

http://verticallogic.co.za/devsite/index-5.html is pretty much the "layout" which i will just copy for each service. Decided to break it down into multiple pages for easier navigation so will just copy that layout for each service, just editing the wording and pictures.
 
Frikkenator said:
What phone did you emulate, looks fine on my side?
Click to expand...

Sony Xperia Ultra

Frikkenator said:
Nevermind, found it.

In style.css on line 1192 there is a css class .list5 > li in there is min-height:310px; that is what is causing the issue.

Remove that and it should fix the issue. This is for @media (max-width: 767px)
Click to expand...

Thanks, let see.

Edit: The above worked... phew I'm already in your debt, thank you :)
 
Last edited:
acidrain said:
Edit: The above worked... phew I'm already in your debt, thank you :)
Click to expand...

No probs :) Just remember to test on a different devices.

Now services is a bit more complicated, but start by moving the div <div class="span4 maxheight2 floatRight1200"> on line 90 (ish) to below the div <div class="span8 bg1 maxheight2 floatLeft1200"> on line 119 (ish). The upload that, it'll be much easier to fix that way, it's just a float or 2 that is set incorrectly.
 
Frikkenator said:
No probs :) Just remember to test on a different devices.

Now services is a bit more complicated, but start by moving the div <div class="span4 maxheight2 floatRight1200"> on line 90 (ish) to below the div <div class="span8 bg1 maxheight2 floatLeft1200"> on line 119 (ish). The upload that, it'll be much easier to fix that way, it's just a float or 2 that is set incorrectly.
Click to expand...

Done and uploaded. I had to delete the floatright1200 as it was still bunching up at the top. Removing it seems to have put the images at the bottom now where I wanted them.

Just need to mess around with spacing between images ( i created my own list7 class in order to decrease the size of the thumbnail without affecting any other images on the site so this is probably just a matter of padding or something ).

Can you possibly give some insight as to what is initiating the "windowed gallery" when clicking on an image in the gallery. I'd like to simulate this in these images aswell but currently just goes to the url of the image and cant scroll.... obviously.
 
Last edited:
Has the gallery been sorted yet? If it has I'm still getting the large spaces between images.
uploadfromtaptalk1407787310205.jpg
 
acidrain said:
Done and uploaded. I had to delete the floatright1200 as it was still bunching up at the top. Removing it seems to have put the images at the bottom now where I wanted them.

Just need to mess around with spacing between images ( i created my own list7 class in order to decrease the size of the thumbnail without affecting any other images on the site so this is probably just a matter of padding or something ).

Can you possibly give some insight as to what is initiating the "windowed gallery" when clicking on an image in the gallery. I'd like to simulate this in these images aswell but currently just goes to the url of the image and cant scroll.... obviously.
Click to expand...

Yea it seems to be a javascript hook called touchtouch.

If you add the following to your head:
Code: 
<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:

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

It should work.
 
Looks good.

Not to derail: Did you guys do the FNB signage install for Portside?
 
acidrain said:
Just need to mess around with spacing between images ( i created my own list7 class in order to decrease the size of the thumbnail without affecting any other images on the site so this is probably just a matter of padding or something ).
Click to expand...

Cool, do you want the images to display below each other like in the gallery or in a 2x2 grid?
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X