Hi, I’m modifying a responsive template and I seem to have somehow messed up how the main page adjusts when you visit one of the other pages. The page that loads when navigated to, goes over the main page, which it is supposed to do, but it’s cutting off the bottom of the main page main logo. It didn’t do it before so I think I’ve upset the code somewhere.
Hoping someone can point me in the right direction.
Attached are 2 screenshots. Home Page & Gallery page as an example.
Many thanks 
Not without seeing your code.
You can see the URL in the images. 
Is it not allowed to post images that show the url ?
Also, is the code I’ve messed up in the css style sheet ?
Sorry - I meant that remark in response to @Gandalf’s request to see the code. A quick trip to the site does the trick.
Of course, if you can remember which section of code you were editing, @Lara.Croft, that would help, too.
Hi @TechnoBear 
I’ve been editing the actual gallery page and another page, but not all of the pages and this effect happens on all pages. The only other i’ve been editing is the style.css
Oh, and the index page, when I added the new logo in place of the template one. But I’m sure the size of the new is exactly the same size as the template one, so I can’t figure if that’s the cause 
You’ve applied an inline style here with a height that is not large enough to contain the image.
<a href="index.html" style="height: 358px;"><img src="img/logo.png" etc...
In the css you have it as 446px but in the html you over-ride it with 358px which is not enough to hold the mage.
Be careful you are throwing a lot of magic numbers, inline styles and scripts onto a relatively straight forward page. Try and keep things simple and logical. I have no idea why you are resizing that big image that sits in the background with JS as it makes the whole page very janky. Why isn’t it a background image anyway?
1 Like
Hi Paul,
I originally bought this template from TemplateMonster and it was a normal template when I wanted a responsive one. They then used their people to turn it in to a responsive site which I paid extra for and all I’m doing is tweeking it by replacing images and altering some of the layout within the pages. There were issues with it to start with but I got fed up with asking them to sort it so I managed to sort them myself, albeit purely by luck and chance I think 
I have a basic knowledge of website coding but I am very much learning as I go along !
I’ve not changed or added any numbers, the like of which you mention, in to the code. I’ve changed padding values to get the text to sit nicely on the nav buttons bu that’s really it.
Another member on here suggested that java wasn’t always a great idea cos not everyone enables java. Don’t know much about that myself. Overall I’m happy with the look and I don’t quite get any jerky feel to it, but ultimately, I just want it to do what it does without any unnecessary background bumpf.
I managed to get the issue sorted with the main logo being cut off at the bottom by using the original template logo size but shrunk my logo within it which gave me a transparent border around it which solved the issue
First thing to learn is to make a backup before you start changing things, so (a) you can revert if need be and (b) you can look back and see what you changed.
You’re confusing Java with JavaScript. Not the same language.
2 Likes
Hi TechnoBear, I do have the original responsive files from the beginning but not saved files as I change them
I call javascript java cos I’m lazy and didn’t realise there was a difference 
It’s your page so it’s your code (even though I know you didn’t write it).
The JS is dynamically adding those rules to the element so when you tweak something in that area you will likely break the dynamics in some way.
It’s not a good idea to use JS to make a responsive site as its too rigid and to hard to control and most of all unnecessary. I realise you are working with what you have got but it makes things ten times harder than it would have been had you started from scratch.
Its always harder to take someone else’s code and bend it to your will especially when they had something else in mind. If you use a template then basically you should stick to the template and not try to change it too much apart from colors and fonts etc. A lot of these templates are unnecessarily complex as they try to cater for everyone but end up not pleasing anyone. It usually tales an expert to modify a template successfully but most people who use templates are not experts and will struggle with some of the techniques required.
When you make changes make sure you have your developer tools window open and you can see the dynamic styles that have been applied to the elements in your page and then you can work around those constraints.
It’s good that you are trying to learn how to do it yourself but it would have been easier from the ground up
3 Likes
@PaulOB Hi and thanks for helping me out.
I kinda understand what you mean and I always assumed it was easier tweeking a template because most of the work was done for you, but I liked the style so much but some aspects of the layout didn’t suit what I wanted.
I think I have it pretty much where I want it now and it looks fine on my iphone 5 and my partners iphone 6, an ipad and a macbook.
On my laptop it all looks ok with the exception of the gallery page “domain/gallery.html” where i have a set of 6 boxes, 3 on 2 rows (page was originally set up for 4 on X amount of rows) but I only have 6 boxes and didn’t like one row of 4 and second row below of 2. So with 3 boxes on 2 rows, they justify to the left when I would have liked to have had them centralised. This also applies to that specific page on the macbook.
I achieved it by setting a new rule in the css which I copied a “list” coding from the other gallery pages and changed the margins so it centralised it. Only problem was that when viewed on a mobile or ipad, the boxes were shoved right over on the right and half disappeared of the screen.
Geees ! This is frying my head 
You should not be using two ul’s to make one list as semantically it is just one list of gallery images. Always try to keep the html semantic because that’s where the meaning of document comes from.
If you used flexbox instead of floats you could go from 3 across to 2 across to one across without the need for any media queries. You can’t do this in your current page because you have two separate lists of 3 instead of one list of 6. You also need to use the same margin on each otherwise when items wrap they move out of line. Indeed you could get rid of margins if you used flexbox’s space-between property instead seeing as you have fixed width items.
If you want to learn how to do this then I suggest you set up a codepen account and just play around with the 6 items in a list and see how flexbox works. It will be worth the effort in the long run.
2 Likes
@PaulOB Thanks
I think I duplicated the “list3” sections because when I had it all in one “list3” it reverted back to the original rows of 4 wide and I ended up with 2 on the bottom row which played havoc with my OCD 
I’ll take some time to have a look at that flexbox and see if I can make sense of what it is all about.
All this aside, how long do ya reckon someone of my experience would have taken to create a site like this from scratch ? There aren’t too many pages within the site.
Also, is it JS that’s controlling the gallery images display and how once you click the thumbnail it shows up the bigger version which you can click on the right side and it scrolls through the entire gallery album ? So if someone has JS disabled on their browser, does that mean the photo gallery won’t display properly ?
Thanks Paul
I think your problem is bigger than that.
I habitually have JS disabled, and this is what I see when I arrive at your site:
Your site does not function at all without JS.
4 Likes
It depends on what ‘create a site’ means exactly. The html and CSS is pretty straightforward but JS and image galleries are complicated beasts that can take years to master properly. You also have some weird content swapping going on for each page rather than reloading a new page .Not sure how that will work with SEO and as @TechnoBear says you get nothing with js disabled. The first rule of web design is to make everything work without any JS and then add JS as an enhancement. In that way you satisfy everyone.
A site without JS (and ignoring back end considerations) should not take too long to complete. I could do those 6 front end pages without JS in a day or less. However it could take a beginner weeks if they don’t have a grasp of responsive concepts and current design techniques such as flexbox.
In essence your page is just one main background image with a small section of content that changes on each page. Without cutting images the html and css is probably only a couple of hours work.
2 Likes
@PaulOB Hi again
This is starting to make sense to me now, although sorting it completely is going to be beyond me 
when I started doing websites, we were still using tables and image nav buttons with very basic drop down menus 
I haven’t done enough over the years to have kept up which is why the whole div and grid thing mostly goes over my head and my knowledge is really quite limited. I tend to find my way round by accident.
The frustrating thing is that I like the way the site operates when I view it and my iphone 5 and girlfriends iphone 6 and our ipads, and her daughters samsung galaxy all work fine so the responsive side seems to work ok. The site uses fancybox to run the image gallery and how it displays the bigger image when clicked. I always thought that you couldn’t do something like that without JS ? How many PC end users generally have javascript disabled on their browsers ? Is it more common than I imagined ? I’m quite reluctant to bin the whole thing because I paid for the template and it wasn’t too expensive but certainly not cheap either and then I had to pay at least that much again to have it converted to a responsive site 
Looks like I might have to find someone else to do it for me, even if it costs me more
These days with the security in mind it is becoming more prevalent to browse unknown sites without js. It’s also much quicker if you have a slow connection to disable all js.
As I said above its not eschewing JS for the sake of it but first making sure everything works without it and then layer the JS on top as an enhancement. In that way you are already moving some way to meeting the necessary criteria for SEO, accessibility and usability.
At the end of the day its your site and if you don’t have the time or experience to change everything then you may have to live with what you have got and to tweak it as best you can. Or as you say pay someone else to do it properly but as you found out that doesn’t always work out nicely either
I would suggest that if you are interested in keeping up with web design then you tweak it yourself for now and try and learn a bit more along the way. Or alternatively start creating a separate site on your own that you can build over time and build up the skills needed to accomplish the task.
It all depends on what your aim is. If you just want this one off site up and running then it may not be worth your time learning all that is needed if you are never going to use those skills again.
3 Likes