I have a site that I'm building in RSD to match a Wordpress theme. I have two issues with what I'm doing and would like a little feedback or help.

I have three columns with three containers with a header, a text field and a picture link. Basically three content boxes in three columns. I had this all working down to 200 px with four breakpoints.

After saving my file a couple times today the page looks fine until it gets to the first breakpoint and then it goes in the toilet. I just don't know what I could have done that caused this to happen. Maybe the file corrupted on one of the saves?

The page with the qr codes works fine as well as the page with my contact form. Here's a link to the project on my test site: http://mytestblog.net/testing/ The top nav menu is not functional but the links on the containers are.

I decided to work on my main nav bar and the footer to make them look better. I have an html element in each with the menu in the top and footer info in the bottom. I can't get either of these to center no matter what I try.

Here's a link to the rsd file if anyone wants to see if they can find out if maybe it's partially corrupted or if I have just totally messed up a setting that I can't find. http://mytestblog.net/files/E&LProducts.rsd

Thanks for any comments or suggestions.

I just thought I would add that I've never had this happen before on any of the websites I've worked on in RSD.

I changed my containers to images and somehow got everything with the three columns fixed. How, I don't have a clue. I didn't want to use images because I don't have a lot of text on the page so not a lot of SEO love.

Still can't get the nav bar menu and footer stuff to center.

I think I found the problem.
I believe it comes down to three different things. Those three columns have different ID's, and those ID's are styled. I do not believe they need to be styled, because those columns are part of the document flow, and are each changed with the layout/grid styling. I believe their ID's are not necessary, and can get confusing. This first thing I did to your file was reset the ID styles. Each column, select ID then reset it with that circle thing (and at each breakpoint)

The columns were no longer floated, they needed to be floated left. The floating was turned off in almost all the 2nd and third columns. It seems they float was disabled at each breakpoint, because the floats had to be reestablished at different breakpoints.

Then the columns needed to be respanned. Resetting the columns so that they are spanned 4/4/4 or 12/12/12 got them to line up well. And a 6/6/12 got two across and a third in the middle below. At one point the blank grey block of the third column was on top of the 1st one, while the content was below the others - once that column was selected in the inspector and its float re-enabled to float left - it was put back into the document flow.

I can post the file, or you can play with the file yourself. Just remember the three issues - ID's were not needed so get rid of their styling for now, fix the floats, and respan. You may have to do this at each break point. It might be easier to just delete the breakpoints, and then redo the break points by just respanning.

Just some notes. I am not sure its necessary to go all the way down to 200 px. I think the smallest phones people are using are 320 px wide. Many Androids come in at 360 px wide. I could be wrong.

The text in your columns might be better off styled in a different way. For instance, they are set up that a small variation can really change how they flow. I tried inserting a paragraph to center text for your third column and whacky margins put it on top of other text. Try setting up the text so that in a container, you use flex positioning and "space-between" for the justification - that that the text it up, and the text link will stay at the bottom of the container - then you will not have to have different margins for the link, only only need to worry about resizing the column heights. There might be an incompatibility with IE 11, but using a subgrid could fix that or some other container workaround.

Bill,

Thanks for the input. I actually had all three columns set at 4/4/4 and then 6/6/12 and finally 12/12/12 but I just couldn't figure out what happened to make it get out of whack.

The reason for the IDs was to help with the image placement vertically. I will play with it so I can see what you're talking about (and learn a little more).

Thanks again.

With the picture link, try giving it a position of: "absolute" then auto, 0, 0, auto. That should place it at the lower right of the container. May not even need the flex positioning. I did that to the picture-link class, and it kept it in the lower right of the boxes all the way through the breakpoints. Just have to make sure that at breakpoints, text is not flowing into the horizontal space of the text-link because its out of the document flow now.

I'll give that a try tomorrow. That was one of the reasons for the IDs that made the entire thing a real pain.

Thanks.

Have you tried flex positioning? In the column, a container would include all the text. Then, the column would be given a position of flex, direction of column, and justification of space between. That would push the two child elements of the column so that the space is between them. I believe the problem with IE 11, is that it requires the column to be given a height, or that the container would be required to have a size assigned to it. So if the absolute positioning doesn't work, the flex positioning might.

I haven't tried flex positioning yet. Right now time is the thing I don't have a lot of and I want to be able to just sit down and learn the entire process without any interruptions.

I've got this looking really good with the images but I do want to change it over to text so I will be using your suggestions when I have the time. I'll see what works the best and go from there.

I thought when we put something in a container that it stayed in a container. That wasn't the case when I built this page. The contents did not stay 'contained' at different breakpoints.

There was a combination of class and ID styling of margins that just pushed content larger than the box. The container can have a size, but if you give something enough margins, or negative margins, you can push something out of container's position. I wouldn't think of the container as a graphical container element, but rather a code that containers/wraps around other other elements or code. This container can also also be styled and positioned. Sometimes a container is used in order to make positioning easier. Is RSD and I might be off in describing it this way, the container is just a <div> </div> given styling as an element within RSD.

Your containers' overflow was set to default visible, so anything that did end up outside the container was visible. If you set it to hidden, it just would not show content that ended up outside the container, and if set to scroll, you would have scrollbars if something went outside the container.

I just learned that the Apple watch resolutions are 312x390 and 272x340. Then the iphone SE is 320x568. So, unless your website might be a website someone would access with their watch, 320 is probably the smallest you need to go.