Need help? Check out our Support site, then

stay theme: how do i make text visible in "room" and not in thumbnail of "room?"

  1. 3. Sure this is easy compared to the other one. :)

    The picture and the header use a width in percent that equal 100. The image is set to 28%, the content 70%, and margin 2%. So you will need to decrease the content percent and increase the image. Just play around until you find what you want.

    Add this to your css.

    .hotels-listing .attachment-room-thumbnail {
    width: 28%;
    .hotels-listing.thumbnail .entry-header {
    width: 70%;
  2. thanks for all your help mrdirby.

    1. that works for setting up the arrow and linking the page. how do i align the arrows to the left and right of the photo under the photo? you can see what i'm trying to do here:

    for now i just spaced it out with the space bar. i am using safari and the words/arrows align perfectly. i opened it in firefox and they were off. is there a command to get it to align in any browser - instead of using spaces?

    2. none of my pages are room pages. they are all the default template. justpi helped me to switch over to the default template because i could only have the room setup for one page (ie marsh) and i wanted it for multiple.

    i did try the option for full width - it did not make a difference. i made this page by copying one of the other pages. i've tried it multiple times, still get this same format issue.

    3. thank you - much better.

    4. when i checked the spacing of the arrows in firefox i saw that my layout is messed up in firefox. everything is pushed over to the left instead of being centered. is there a way for me to fix this?

    thanks again -

  3. 1. I thought about that before but wasn't sure how you wanted to implement. You want to avoid putting spaces like that in. Add an ID to each anchor tag, lets call them right and left.

    The links in your page will look like this.

    <a href="" id="left">← marsh</a>
    <a href="" id="right">marsh 02 →</a>

    And the CSS.

    #left {
    float: left;
    margin-left: 93px;
    #right {
    float: right;
    margin-right: 93px;
  4. 2. I'm not sure why the meet page is formatting differently. It kind of seems like a page setting thing. Try recreating the page from scratch. The only other idea I have is that your featured image and main page image are too large. The image in the content shows that it is pulling the thumbnail.

    3. Great.

    4. Do you mean the same arrows as in the first question. Try the above css and see if that solves the problem.

  5. The page "Meet" looks different because you've added an empty text widget to the secondary sidebar but you messed with its visibility settings: you've set it to be hidden on "Meet", so the page has become full-width.

  6. a. the arrow locations are solved - much better!

      how do i locate items vertically w/ anchor tags & css instead of using "return" in the visual editor? i've been creating the spacing between the arrows and the "buy now" buttons with returns.
      i have one portrait orientation photo that the arrows are not lined up correctly for. how do i set up the arrows specifically for this page?

    b. i don't know how i would have set the text widgets to be hidden on meet. i deleted the text widgets in the sidebars and reinserted them. all the pages are centered now.

    c. in firefox it looks like there is no primary sidebar, so everything is pushed to the left. when you click into a photo, it is small and the arrows are located to the left and right of the edge of the photo.

      is there a way to make sure the website is showing up centered, w/ correct sizes and alignments in all browsers?

    d. at the bottom of each page i want to put a quote. i have the same "return" vertical spacing question as above and:

      how do i set that text to be full width wrap - to the width of the images above it?

    thank you -

  7. the portrait image w/ the misaligned arrows is here.

    the text that i want as wide as the images above it and with more space above it is at the bottom of this page.

  8. ok addition to b.

    my solution to fix the page "meet" ended up making the individual photo pages narrow. see here.

      how do i get the individual photo pages to be full-width while the parent pages have empty sidebars?
  9. a. for that portrait page change your links on that page to this html. I added a special style to those links so there is zero margin and it will align with the edges of the picture.

    <a id="left" style="margin-left:0;" href="">← mountain 01</a>
    <a id="right" style="margin-right:0;" href="">mountain 03 →</a>

    What is happing is that instead of hitting return to create space I'm putting a margin around the content. So the browser knows to put x amount of space there instead of hard returns or actual spaces. This explains how css works with space, called the box model.

  10. b. Do you have an example of the full width that is working. I think you are going to have to target each page you want full width and change the width of the main container and the left padding.

    c. I'm not seeing a problem with anything being displayed to the left in Firefox. Can you send me a screen shot?

    d. Have you tried the blockquote feature of your blog. It looks like it will do exactly what you are asking.

  11. hi mrdirby

    a. that code for the portrait page aligns the arrows perfectly with the edges of the photo, and they are perfectly placed just below the photo.

      i still had to press enter twice to create space between the arrows and the "buy now" buttons. i imagine there is a better way to do that?
      now that the sizes of my photos in the individual photo pages are messed up, i see that the arrows are not in the right place. can i use the code you gave me for the portrait image to have the arrows align under all my images, no matter the size?

    b. i'm confused about what happened. all of my individual photo pages were full-width and i never did anything with the container/padding before. then i tried to fix the meet page by removing the sidebar widgets and including them again and then all my individual photo pages became centered and small. is there a way to override the widgets on the individual photo pages?

    c. i took a screen-shot. how do i send it to you?

    d. i tried blockquote. it indented the quote and still has it wrapping at about 2/3 the width of the photo above instead of the full-width of the space. you can see at the bottom of this page.

  12. in firefox it looks like there is no primary sidebar, so everything is pushed to the left.

    It's not only in Firefox, it's in any decent browser version. Remove this (wrong) piece of code you had added:

    #content {
        padding-left: 0;

    still has it wrapping at about 2/3 the width of the photo above

    That's because the texts were designed to show next to the thumbnails. Now that you turned the thumbnails into large images, you need to remove this:

    .hotels-listing.thumbnail .entry-header {
        width: 35%;

    and add this instead:

    .hotels-listing.thumbnail .entry-header, .hotels-listing.thumbnail .entry-content, .hotels-listing.thumbnail .entry-meta {
        width: 100%;

    is there a way to override the widgets on the individual photo pages?

    Edit them and select the full-width template.
    Or do you mean empty sidebars instead of full-width pages?
    (Since this isn't clear to me, I'm skipping the answers to your other questions for the moment.)

  13. OK I must have misunderstood you before about the space below the right and left links. Replace this for your right and left Ids in your css. Added margin below.

    #left {
    float: left;
    margin-left: 93px;
    margin-below: 25px;
    #right {
    float: right;
    margin-right: 93px;
    margin-below: 25px;

    For blockquotes change the margin to 0 should do the trick.

    blockquote {
    margin: 0;
  14. hi mrdirby & justpi. thanks for your help. here's where i am now.

    • i tried the code with the margin beneath the arrows, didn’t work and still had to use enter twice in the text editor to get the spacing I wanted.
    how can i use code to create this space?

    • the following pages the photos are not showing up full width and/or the arrows are not aligning with the edge of the photo: ocean 1, 2, 3. mountain 2. orenda 2. still2, 4. can you tell me how to fix this?

    thank you again.

  15. @emilychaffee, let's try something a little different here. First off, you are going to have an overall div around two child divs, one floated left with the left arrow and link, and one floated right with the right arrow and link. This is example code for your orenda02 page. Also note that I have taken out any style attributes you had in there to begin with. I've taken care of all that in the CSS below.

    <div id="ec-nav">
    <div id="left"><a href="">← orenda 01</a></div>
    <div id="right"><a href="">orenda 03 →</a></div>

    The overall div (ec-nav) has some CSS associated with it and it is what controls the space below the previous/next navigation. To control that space, adjusting the bottom margin value (100px right now). The #left and #right are somewhat different from what you had as well.

    Replace the CSS associated with #left and #right and then paste the three rules below your existing CSS and see what you think.

    #ec-nav {
        margin-bottom: 100px;
        width: 100%;
    #left {
        float: left;
        text-align: left;
        width: 48%;
    #right {
        float: right;
        text-align: right;
        width: 48%;
  16. I've looked at your images, and these are the sizes uploaded for Ocean 01 through 05:

    Ocean 01: 987px wide
    Ocean 02: 882px wide
    Ocean 03: 1024px wide
    Ocean 04: 1126px wide
    Ocean 05: 1600px wide (shows at 1190px in width

    The maximum image width on Stay (visible) is about 1190px due to padding. Ocean 01, 02 and 03 are not near that 1190px maximum width. WordPress will not enlarge images that you upload. You can edit the images from within the Media Library, but you can only scale them down, not up.

    If you want 01, 02 and 03 to be the maximum width, edit your original image in your image editing program and size them to about 1200px in width and upload those and edit the pages associated with those images and delete the existing image in reinsert the larger image.

  17. thank you on both @thesacredpath. both issues are fixed. one last page is not fixed, the portrait orientation photo on mountain 2. what is the best way to align the arrows to the edges of the photo?

  18. On the portrait image, it is only 845px wide when I look at the actual image by clicking on it, and also when clicking on it in your media library (845px wide x 1126px high).

  19. right, and i don't want it full width because you'd have to scroll down to see the whole thing.

  20. Oops, sorry. I would make your opening div for the ec-nav look like this. It makes the max width the same as the image and them centers it with the image by setting the left and right margins to "auto".

    <div id="ec-nav" style="max-width: 845px; margin-left: auto; margin-right: auto;">

  21. that works.

    and how do i get the buy buttons to align left with the image?

  22. Do similar to what we did for the navigation. Wrap those three paragraphs in a div tag, and in the opening div tag, make it look like this.

    <div style="max-width: 845px; margin-left: auto; margin-right: auto;">

  23. that worked!

    wow. that was quite a journey to get all that figured out. i am almost ready to launch! thank you @justpi, @mrdirby, and @thesacredpath for all your help along the way. you helped me make exactly what i wanted.

    in gratitude -

  24. You are very welcome.

  25. hello, me again. i'd like for people to be able to click on one of my photos and/or the title to see it larger instead of just the title being the link. how do i do this? thanks! e.

  26. here's an example page:

  27. Hi there, When you insert the images into the pages, you can choose to link them back to the original file. See item 6 on the screenshot under #4 in the Images support page.

    You can also edit previously inserted images by clicking on the image in the editor to highlight it and then click the "edit image" icon at upper right and under Link URL enter the URL you want the image linked to and click update and update the page.

  28. option 2 sounds perfect since all the images are already in there. i can click the image in the editor to highlight, but i don't see an "edit image" icon in the upper right, not sure why.

  29. If you are in the page/post editor, click on the image and the link will be at upper left (sorry, I said right).

  30. got it. great, thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic