funky list problem

User 1948548 Photo


Registered User
26 posts

http://sacklerlefcourtcenter.com/01/principles.html


Hi ,

Help!

I can't figure out what I have done incorrectly. My list gets funky at screen size 500. You can see the page at the link above.

Here is my code. (I put in the colors so that I can see when I'm in that screen size. I remove colors once a particular screen size is all done and looking good.)


Thanks everyone.
Kim


@media screen and (max-width: 500px){

li span.text,
li.principleslist {
font-size: 10 px;
display: list-item;
float: left;
margin: 0px 0px 0px 8px;
padding-right: 0;
width: 100%;
text-indent: 1 px;
line-height: 1.0;
}
p.paragraph span.text {
font-style: normal;
}

p.paragraph.innertext {
float: left;
margin-top: 10px;
width: auto;
}

p.paragraph#paragraphphilsophy_3 {
margin-top: 0;
margin-bottom: 0;
}

p.paragraph#paragraph-theseprinciples-3 {
margin-top: 7px;
margin-bottom: 0;
}

p.paragraph.innertextextra {
float: left;
width: auto;
}

p.paragraph span.paragraph-text-2 {
background-color: #bf22bf;
}

ul.unorder-list.principle-list {
margin-top: 50px;
background-color: #FF8040;
list-style-position: inside;
}
User 187934 Photo


Senior Advisor
20,245 posts

Hi Kim,
I guess you need to be more specific as I didn't see anything that I would call funky. I thought it looked pretty good.:cool:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 1948548 Photo


Registered User
26 posts

here is a screen shot.

This occurs at 500px.

Attachments:
User 187934 Photo


Senior Advisor
20,245 posts

Did you take a look at that element in RLM at that break point to see what you had set different? If you could share your rlm file that would be great.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 1948548 Photo


Registered User
26 posts

Hi,
I just reset the settings for the list, didn't help. Here is the RLMP file.

Thanks again,
Kim
User 103173 Photo


VP of Software Development
0 posts

Attaching the .rlmp project file would be very helpful.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 379556 Photo


Registered User
1,568 posts

I think the problem may lie in the principles.css file. Commenting out the link to that particular CSS file in the header seems to resolve the problem, but I fear that I know too little about CSS3 to be sure where in that file the problem lies.

Frank
User 379556 Photo


Registered User
1,568 posts

At line 224 of the principles.css file there is styling for when the screen width is 500px, and line 229 ( display: list-item;) seems to insert the extra list markers.

Frank
User 1948548 Photo


Registered User
26 posts

thanks frank, that worked. ;);););)

Scott, FYI, I have no idea why, but I tried to attach the file several times, and it didn't work . I got a message stating that I had to attach a file with the proper extension. of course my rlmp file did have the proper extension...

I also renamed the file, I thought perhaps the file name to the left of .rlmp was too long, but that didn't help either.

User 2623310 Photo


Ambassador
282 posts

FYI

Just zip your rlmp file and attached it that way to your message.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.