Getting Image Links To Be Where I Want
-
For this page I am trying to get to images side-by-side that will be links to a sub-page. Or even one and then the other after a small scroll. I just want to be able to control where my images are on the page. Thanks ahead of time for the help!
The blog I need help with is: (visible only to logged in users)
-
Hi there, this can be done. It involves add a div around the three images and then divs around each of the images along with CSS classes and then creating CSS to size the images and control alignment of them. It will also require some Media Queries to change the alignment for smaller screens.
If you wish to add the linked images to that page and then let me know, I can work out the code for you.
-
Hey, thanks for the reply. On another page I went ahead and tried using a table to set images where I want, but the table is larger than I’d like and making it smaller with the only code I know just offsets it to the left and no matter what size it is mobile squishes it together. this page at the bottom where there’s 4 image links is what I’m trying to replicate essentially only mine would be much more simple. When you go on mobile there’s turns into a vertical row instead of horizontal this is basically what I’m trying to accomplish. Thanks a bunch!
-
With divs around things, we can keep four across down to the point that they start to get too small and then switch things with a media query to two per row and then for phone sized screens we can set them to a single column with one in each row if needed. Just let me know when you have the four images placed and linked in the page and I’ll work out some code for it.
-
I’m getting a little closer, but what the tables are doing for me aren’t exactly satisfactory. My about page is getting closer but it goes off the side of the screen on mobile. I just can’t seem to get the table method to work. In the style of the learn page everything is much closer to where it needs to be, but it takes up too much of the page space and the images are too spaced out. Also on the about page the images are set too far to the left on desktop. Sorry for double post, but I’m new to all of those and I’ve been trying all day to figure something out haha.
-
-
-
I just got partially started on what will work. I have some images in divs and they’re linked and working. I mainly just need to know what to do to be able to place them where I’d want them to be on the page.
-
Hi, the following is the code you will need to put into your About page for the images at the top. Just delete the images stuff and then paste this in where it was from within the text tab in the editor and save.
<div> <div id="staff"><a href="https://pinemtn.org/about/staff/"><img style="width:200px;height:200px;" src="https://pinemtnorg.files.wordpress.com/2016/04/web1_pmss-pride.jpg?w=333&h=231" /></a></div> <div id="trustees"><a href="https://pinemtn.org/about/board-of-trustees/"><img style="width:200px;height:200px;" src="https://i1.wp.com/universalwebsites.theknot.com.s3.amazonaws.com/UniversalWebsites/PageMainImage/4018824449081091/2173121/31189194/med/laurelhouse.jpg" /> </a></div> <div id="history"><a href="https://pinemtn.org/about/history-and-archives/"><img style="width:200px;height:200px;" src="https://i1.wp.com/www.pinemountainsettlementschool.com/uploads/content/20081216371687.jpg" /></a></div> <div id="mission"><a href="https://pinemtn.org/about/mission-and-goals/"><img style="width:200px;height:200px;" src="https://i2.wp.com/www.franbecque.com/wp-content/uploads/2012/10/Pine-Mtn-SS.jpg" /></a></div> </div>And this is the CSS to go along with it. Place this at the very bottom of your custom CSS.
/*About page top image styling*/ #staff,#mission,#trustees,#history { display:inline-block; width:24.5%; text-align:center } #staff img,#mission img,#trustees img,#history img { padding-left:10px; padding-right:10px } @media screen and (max-width: 900px) { #staff,#mission,#trustees,#history { width:49%; margin-bottom:20px } } @media screen and (max-width: 500px) { #staff,#mission,#trustees,#history { width: 100%; } #staff img,#mission img,#trustees img,#history img { padding: 0; } }After adding this, make sure and view the page and widen and narrow your browser window to see how things adjust and change. I’ve used a Media Query to change it to two columns of two images at 900px and then I’ve changed it to a single column at 650px and narrower. See what you think and let me know.
Also, if all the above works for you, then remove the following from your custom CSS.
#staff { height: 120px; margin: auto; text-align: center; width: 120px; } -
Hey,
Thanks a lot! This works wonderful on the desktop and mobile! Where in the code would I put the image text at? I’ll play around with it and see if I can find it myself before you reply. I thank you greatly for this! I’m assuming I can adapt this for other pages? What if I have more than 4 images? Like on my learn page I have 5 and another page or two will have 5 images. I’ll play around with it and see what I can figure out on my own. Many thanks!
-
I tried putting text in, but on mobile it sends it off to the side of picture. So unless I put it in the wrong spot that will need resolved. I appreciate your help greatly!
-
The image code is in the divs in the first block of code I gave you that goes into the page editor.
-
I have everything working with your code except for when it’s minimized to mobile size the text I put in under the images gets pushed to the right side. I’m asking if there’s something I can do to fix that. Because I need the words under the images Like I have it here.
-
I noticed that on the Board of Trustees image, the text is aligning centered below the image. When I looked at that, I found that there was a break (line break) right before the word. Edit that page, switch to the text tab in the editor and then place your cursor right at the beginning of Staff, History and Mission and Goals and press return once. That should fix things for you.
-
That made a mess of it actually. I put my cursor right before those words. Pressed return and that moved them under the image. Now on the webpage it’s all out of order. I think we may be making images to replace these that will have the page name in them so this may not be an issue though. Perhaps I should get back with someone on this forum when I know if I actually need to fix this or not.
-
@pinemtnschool, let me know when and if this needs to be fixed and I’d be more than happy to help sort things out.
One thing I would suggest is that the text part below the image is actually its own HTML link. Right now you have the image and text combined in one link element and that can cause issues.
- The topic ‘Getting Image Links To Be Where I Want’ is closed to new replies.
WordPress.com Forums 