white menu box mobile

ljk

How do I remove or make transparent the white menu box on a mobile? The background is black so I would prefer not to have a white box.

Hikin' Mike

Please post your website.

ljk

actually, I changed the colors since I couldn't resolve some color issues. My website is: lindakessler.com

However, I still have the same issue of on the MOBILE:

The white box with the word 'menu' ; and in the Paintings Folder and Photography Folder -- a white border surrounding the thumbnails. For both, I would prefer no white border, just the same grey background.

And, if you have any time, I can't seem to fix the text/links on the home page so all of it is white, including the menu links, the social media, copyright. Also, the image is distorted. It doesn't need to stretch, which is distorting it.

Thanks so much...

Hikin' Mike

@ljk said:
actually, I changed the colors since I couldn't resolve some color issues. My website is: lindakessler.com

However, I still have the same issue of on the MOBILE:

The white box with the word 'menu' ; and in the Paintings Folder and Photography Folder -- a white border surrounding the thumbnails. For both, I would prefer no white border, just the same grey background.

Looks like you figured those out.

And, if you have any time, I can't seem to fix the text/links on the home page so all of it is white, including the menu links, the social media, copyright.

Add this to your theme's custom CSS section or just a CSS Block in your home page: .sm-user-ui .sm-page-home a {color:white !important;}

ljk

Hikin' Mike,

You're super! Thanks so much. The Homepage is resolved but now the text on the rest of the pages are also white and should have stayed black, both on the desktop and mobile. I think some other CSS code needs to be inserted somewhere.
Yes, I researched and figured out some stuff. However, I am in a quandary of how to resolve the Mobile platform of white borders around the thumbnails in the Paintings Folder and Photography Folder. Is there a way to make it transparent, as I would just like the background grey color?
And, stop my photo on the Homepage from being distorted/stretched, which it wasn't until recently.

Tx,

LJ

ljk

I fixed the white text except for the copyright on the bottom of the homepage on the mobile only which is still black. All the text is fine now except for that and can't figure out the CSS code.

Am really baffled about those white borders on the thumbnail images, arghh! And, the distortion of the image on the homepage, 2x arghhh!

Tx,

Hikin' Mike

Change the code I posted above for this:

.sm-user-ui .sm-page-home,
.sm-user-ui .sm-page-home a {color:white !important;}

As I said before, I didn't see any issues about your thumbnail images, so please post a link and maybe a screenshot.

ljk

For the thumbnails— the background is a very light grey, but the white borders are more obvious in the Photographs page.

![](https://us.v-cdn.net/6029383/uploads/editor/n7/nj
4252ipsove.png "")

The links are:

https://www.lindakessler.com/homepage

https://www.lindakessler.com/Photography-Folder

https://www.lindakessler.com/PaintingFolder

Hikin' Mike

I don't own a mobile, so providing a screenshot helped. I usually resize my browser to replicate a mobile. I had to reduce it to around 390px to show the "border". This should remove the background:

/* Makes Thumbnail Background Transparent */
.sm-user-ui .sm-tiles .sm-tile-content {background-color: transparent;}

ljk

Hikin' Mike,

Wow, finally it's fixed, thanks to you! Thank you! Is there any way to move the titles down closer and the ones below the image up closer to the image on the Mobile especially on the Photographs folder/page? The Paintings page/folder also has the same problem. I realize that the reason that is happening is there is really that border I made transparent so the border is taking up the space. What do you suggest to resolve this issue. I don't understand why there would be those borders to begin with. I am sending a screenshot so you can see what it looks like.

ljk

Hikin' Mike,

Wow, finally it's fixed, thanks to you! Thank you! Is there any way to move the titles down closer and the ones below the image up closer to the image on the Mobile especially on the Photographs folder/page? The Paintings page/folder also has the same problem. I realize that the reason that is happening is there is really that border I made transparent so the border is taking up the space. What do you suggest to resolve this issue. I don't understand why there would be those borders to begin with. I am sending a screenshot so you can see what it looks like.
Thank you,

Hikin' Mike

That's how the thumbnails work. Those are not borders they are containers. Nothing you can do about moving the titles.

ljk

Hikin' Mike,

You're really great! Your directive resolved the issue. Realizing it was a container and not a border I realized I needed to fill the container and made the thumbnails vertical, which fixed the white space issue.
Any idea of how to prevent the image on my homepage from being distorted? It was not distorted until recently of which I did not do anything to the image so not sure why it is stretching. It especially gets distorted when scrolling down the phone vertically.

Tx,

lek

Hikin' Mike

@ljk said:
Any idea of how to prevent the image on my homepage from being distorted? It was not distorted until recently of which I did not do anything to the image so not sure why it is stretching. It especially gets distorted when scrolling down the phone vertically.

No idea.

ljk

Tx!

ljk

Hi Mike,

I'm emailing you as the SmugMug team screwed up my site and have been referred to several people with no one wanting to take responsibility for their screw up. Below is the code on my site. Tom removed one particular line which fixed the home page distortion but changed the thumbnails on the Photo and Paintings page. I put the code back, but I don't know if it is in the correct place as the only thing it fixed was keeping it as two rows two columns. However, the 1:1 square thumbnails are not keeping now. So, I don't know what to do. It's days since this change and i don't know what to do. I would think that Tom would revert it back to what it was and refer the issue with the distortion of the homepage without screwing up the rest of the site but he wants to refer it to Nick. I am pissed... Any assistance would be appreciated. Thanx!

The line which I took out and replaced is:

.sm-tile-content .sm-image { width: 90%; }

But, as mentioned before I don't know if it is in correctly or in the right place.

The complete CSS code is:

/*hide keywords */.notLoggedin #photoKeywords {display: none;}

/* Reduce font-size of the gallery title */ .sm-user-ui .sm-gallery-cover-title {font-size: 24px; }

.sm-tile-keywords { display: none; }

/* Change 3-column to 2-column on mobile */

.sm-tile-content .sm-image { width: 90%; }

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

.sm-tiles-column-organic.sm-tiles-col-3 .sm-tiles-column,
.sm-tiles-grid.sm-tiles-col-3 .sm-tile-wrapper {
width:50%
}
.sm-tiles-Th .sm-tile-wrapper,
.sm-tiles-Th .sm-tiles-column {
max-width:100%;
}
.sm-tiles-spacing-36 .sm-tile {
margin: 0px;
}

.sm-tiles-column-organic.sm-tiles-spacing-36, .sm-tiles-grid.sm-tiles-spacing-36 .sm-tiles-list {
margin-left: 0px;
}
}

.sm-user-ui .sm-page-widget .sm-page-widget-pagetitle-s,
.sm-user-ui .sm-page-widget .sm-page-widget-pagetitle-xs,
.sm-user-ui .sm-tile-info a {
color:black;
}

/* Makes Thumbnail Background Transparent */
.sm-user-ui .sm-tiles .sm-tile-content {background-color: transparent;}

Hikin' Mike

You code should go in your theme's custom CSS section. As for your 1x1/rows, I can't help.

ljk

Hikin’ Mike,
Tx! All was fixed except the thumbnails on the mobile which don’t have space in between them as on the desktop. They did before SmugMug made a CSS change. Now I’m getting passed back and forth, when they actually made the error.

I’ll attach a screenshot.

Tx,