How to distribute 4 images evenly across a page plus a border



Hi everyone i am new to CSS. I have a WordPress template that i am trying to change some basic CSS on and also remove the inline css to the theme css folder. Its easy to put the code into the theme. I have located the css that gives all the images on my site a border which is perfect. The issue i have is when using firebug i noticed it was bootstrap css.

Any advise gratefully received




Does it need to be responsive? If not javascript is great for doing math, get the width of the window, then divy that up among the number of images, their left & right margins, and the page padding between your images and the border.


Hi the theme is responsive. As i mentioned i have located the CSS to give the images a border

I just not sure what i need to copy into the theme css.




Recommend leave the theme.css alone (as it came out of the box). Write your own custom style sheet to override the built-in ones. You'll thank yourself later.


I can do all the changes i need from within the theme. Its just identify what the element is. The widget is called #black-studio-tinymce-9. I tried to use #black-studio-tinymce-9 img {border: 2px solid; } in the css and no joy. Its all so confusing and everyone i speak to has a different opinion on what to do.




The advantage of using your own unique custom style sheet is that you can revert to the default theme in one motion without changing any code except the page template. You can even store the CSS away from the theme so it's never damaged or overwritten by an update.

/site_root/ ->
    css/ ->

Find the template php that draws the head element and insert a link (after all the other CSS links). Your CSS must load last to have the greatest precedence.