RKB Posted July 5, 2017 Share Posted July 5, 2017 Good Afternoon, I am using w3-Pro Website Template and for my purposes it is no less than fantastic, I have never had a website before than give me 100 / 100 on Google before. I am using 3 columns of images with text under, I have found that unless of have all of the text the same length the images jump around a bit. Is the some coding I can change / add that will fix this. https://www.bwf.com.au Cheers Ron Link to comment Share on other sites More sharing options...
dsonesuk Posted July 5, 2017 Share Posted July 5, 2017 You need to fix validation html errors https://validator.w3.org/nu/ you have misplaced/missing div, and using headers as container for whole page when they should be only for the main image and text below that before 'hottest deals'. Then you need to place each 'hottest deals', 'popular' in individual containers, then you can add display: flex to make each column section the same height to the highest column box content. Link to comment Share on other sites More sharing options...
RKB Posted July 5, 2017 Author Share Posted July 5, 2017 Thank you for your reply, Another question, when I run the Validator it also tells me that the image width="100%' is no good, however when I place the image width as 470px the images look ok on the Desktop but are over lapped on a Tablet. As the w3-Pro Template uses width="100% is it OK to stay with width="100% Cheers Ron Link to comment Share on other sites More sharing options...
dsonesuk Posted July 5, 2017 Share Posted July 5, 2017 You shouldn't really, you should style them using something similar to .w3-third.w3-container a img, .w3-card-4 a img {width: 100%;} Using fixed width, makes them unresponsive as they won't adjust to smaller devices, as you have found out. Link to comment Share on other sites More sharing options...
RKB Posted July 5, 2017 Author Share Posted July 5, 2017 Once again, Thank you for your support and assistance. I have 'got rid' of all of the errors and found and fixed a few more along the way. What I am not sure about is where I use the display: flex https://www.bwf.com.au Cheers Ron Link to comment Share on other sites More sharing options...
dsonesuk Posted July 6, 2017 Share Posted July 6, 2017 (edited) newhtml5.zip Edited July 6, 2017 by dsonesuk Better option - no need to add empty columns Link to comment Share on other sites More sharing options...
RKB Posted July 7, 2017 Author Share Posted July 7, 2017 Thank you for your 'Top Shelf' assistance and taking the time and thought to assist me. You can now see the fruits of your labour at https://www.bwf.com.au When I first installed the code the Menu 'Hamburger' was not present. So I removed the line: .container.demo-1 {display: none;} from the code you provided. The Menu is now visible and the site appears to have retained it's integrity. is the removal of the line OK. Cheeers Ron Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now