Jump to content

Text Under Image


RKB

Recommended Posts

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...