Problems with CSS

pcather

Quite awhile back someone helped me make my mobile site look better. They had me create a couple of duplicate items then gave me the code to hide one on the desktop and one on phones. It worked beautifully. When I needed to make a change on the mobile part I had to remove the CSS because it was hiding it even when I went into customize. No problem. I just deleted it and added back when I was finished.

I now want to make a change to my mobile phone items. I've removed the CSS but I still can't see the duplicate items. I've cleared my cache and checked other browsers and computers. I've even changed the code to say show all on desktop. I still can't see them on the desktop. They still exist because I can see them on my phone. But the desktop info is NOT on the phone despite the fact that the code has been removed. Is this due to some change in Smugmug over time. The code is currently not on the site. Here is the url and the code.

http://www.reflectetc.com Homepage

/* ================
= SmartPhones =
================
Hide for mobile browsers /
@media only screen and (max-width: 640px) {
.sm-search-form, .sm-page-widget-social-links, .sm-page-widget-13753310, .sm-page-widget-13753346, .sm-page-widget-14029090 { display: none; }
}
/Hide for desktops*/
@media only screen and (min-width: 641px) {
.sm-page-widget-13763857, .sm-page-widget-13763862, .sm-page-widget-14090019 {display: none;}
}

Thanks for any help you can give.
Pamela

Hikin' Mike

If this is your code then you have copied it wrong. You are missing two *. Remove the code you posted and use this.

/* ================
= SmartPhones =
================
Hide for mobile browsers */
@media only screen and (max-width: 640px) {
    .sm-search-form, 
    .sm-page-widget-social-links, 
    .sm-page-widget-13753310, 
    .sm-page-widget-13753346, 
    .sm-page-widget-14029090 { display: none; }
}

/*Hide for desktops*/
@media only screen and (min-width: 641px) {
    .sm-page-widget-13763857, 
    .sm-page-widget-13763862, 
    .sm-page-widget-14090019 { display: none; }
}

pcather

Thanks for noticing. I must have accidentally removed that when I was playing around with it. The original is correct and was working perfectly.

Problem is when the code is there I can't see the items for only the phone even while I'm in the customize mode. In the past I deleted the code, edited the items and then returned the code.

Now even when the code is NOT on the page I still can't see the items I want to edit.

I know they still exist as I can see them on my phone.

pcather

I just checked my page using "Inspect Elements" I found the mobile only items there as well. I just can't see them to edit them.

pcather

Nevermind. I just figured out how to get around not seeing the item. I just went to the list of content on the right. Clicked on each "text" and "photo" until I found them. I was able to edit them from there.

Jtring

One other thing to note: SmugMug change the break point between mobile and desktop views from 640/641px to 736/737px a while back. You might want to replace the 640 and 641 in the @Media statements with these.

pcather

Thanks Jtring I will do this.