How can I remove the white border of my image at mobile display?

patkok

Hi everyone,

I'm looking for help. Is there anyone able to teach me how to remove white border at my photo which is left and right. I had attached the file of original and photoshop. I hope all pages at mobile version are stick to side no border.

Original :

Photoshop :

My website is www.patrickkok.com

Hope to hear from anyone of you.

Thank you.

Regards,
Patrick Kok

Lille Ulven

Hi Patrick

What should do the trick is adding the following CSS to a sitewide CSS Block:

@media only screen and (max-width: 640px){
.sm-page-widget .sm-page-widget-content {
    margin: 12px 0px !important;
}
}

Good luck.

Lille Ulven

patkok

@Lille Ulven Thank you so much. The border is finally remove. Do you know how to remove the horizontal white border of each photo when I scroll down from mobile version?

Hope to hear from you again.

Thanks ya.

Regards,
Patrick Kok

Hikin' Mike

@patkok said:
Do you know how to remove the horizontal white border of each photo when I scroll down from mobile version?

Remove this:

@media only screen and (max-width: 640px){
    .sm-page-widget .sm-page-widget-content {
        margin: 2px 0px !important;
    }
}

Add this instead:

@media only screen and (max-width: 640px){
    .sm-user-ui .sm-page-widget .sm-page-widget-content {
        margin: 2px 0px;
        padding: 0px;
    }
}

sbphotographystudio

@Hikin' Mike You know, I was going to ask this same exact question lol I tried to copy and paste the new code to a site-wide CSS block and it doesn't happen to work on my mobile site. What could be the issue?

Lille Ulven

Can you post a link to your site, @sbphotographystudio - it would make it easier to figure out why the code is not working on it

Lille Ulven

denisegoldberg

@Lille Ulven said:
Can you post a link to your site, @sbphotographystudio - it would make it easier to figure out why the code is not working on it

The link is in the signature, http://www.sbphotographystudio.com/

sbphotographystudio

@Lille Ulven sure thing! My website is: http://www.sbphotographystudio.com.

Lille Ulven

@denisegoldberg thanks, temporarily blindness hit me ... ;-)

Lille Ulven

@sbphotographystudio something that could work for you is changing your code to this:

@media only screen and (max-width: 640px){
.sm-user-ui .sm-page-widget .sm-page-widget-content {
margin: 2px 0px;
padding: 0px;
}
.sm-tile-content{
display: initial;
}
}

Hope this helps

Lille Ulven

sbphotographystudio

@Lille Ulven Thank you for your help! I made the necessary changes but unfortunately nothing happens. Wonder what could it be?

Lille Ulven

I found this rule for you page:

@media only screen and (max-width:640px){
 .sm-page-widget .sm-page-widget-content {
margin: 0 12px !important;
padding: 12px 0 !important;
}
}

And at least in FF turning the margin off will well, delete the white boarder. So you would need a rule like this instead:

@media only screen and (max-width:640px){
.sm-page-widget .sm-page-widget-content {
    margin: 0 0px !important; /* 12px changed to 0px*/
    padding: 12px 0 !important;
}
}

And I would hope that this is code that you originally inserted because else it could become difficult to overrule this, as it's marked as "!important"...

Good luck

Lille Ulven

sbphotographystudio

@Lille Ulven Thank you so much! It worked!

Lille Ulven

Glad to hear it all worked out for you, @sbphotographystudio

patkok

Hi @Lille Ulven

Thank you for your help but it doens't work actually.

@media only screen and (max-width: 640px){
.sm-page-widget .sm-page-widget-content {
margin: 2px 0px !important;
}
}

Result >

@media only screen and (max-width: 640px){
.sm-user-ui .sm-page-widget .sm-page-widget-content {
margin: 2px 0px;
padding: 0px;
}
}

Result >

I think my main issue of my website is white border at each galleries. The white border I highlighted in red is super huge.

Photo >
Link > http://www.patrickkok.com/Weddings/Actual-Day/Randall-Syn/

Do you know how to get away of the white border at mobile. I really hope you can teach me how to remove it.

Thank you so much.

Regards,
Patrick

Hikin' Mike

@patkok

Did you read my suggestion above? I will post the code again....

Remove this:

@media only screen and (max-width: 640px){
    .sm-page-widget .sm-page-widget-content {
        margin: 2px 0px !important;
    }
}

Add this instead:

@media only screen and (max-width: 640px){
    .sm-user-ui .sm-page-widget .sm-page-widget-content {
        margin: 2px 0px;
        padding: 0px;
    }
}

patkok

Hi @Hikin' Mike, I did try the code but it's not working.

This is the result after using the code you suggest

Do you know any method to make it better?

Thanks

Hikin' Mike

Where are you putting the code. It should be in your theme's site-wide CSS.

patkok

Hi @Hikin' Mike , I placed it here. But it's not working. Is there anything wrong with it?

Thanks

Hikin' Mike

May need the !important tag:

@media only screen and (max-width: 640px){
    .sm-user-ui .sm-page-widget .sm-page-widget-content {
        margin: 2px 0px;
        padding: 0px !important;
    }
}

patkok

Thanks @Hikin' Mike . It looks much better now. Last question , that I really hope you can help me out.

How can I cut down the white border at all galleries?

Image >

Hikin' Mike

@patkok

Not sure how much white space you wanted to remove, so I tried to make your galleries just like your home page. Just remove this:

@media only screen and (max-width: 640px){
    .sm-user-ui .sm-page-widget .sm-page-widget-content {
        margin: 2px 0px;
        padding: 0px !important;
    }
}

I use this instead:

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

    .sm-user-ui .sm-page-widget .sm-page-widget-content {
        margin: 2px 0px;
        padding: 0px !important;
        }

    .sm-user-ui .sm-tiles-info-after .sm-tile-info {
        padding: 0;
        }

    .sm-user-ui .sm-gallery-journal .sm-tile-wrapper {
        margin-bottom: 0px;
        }

    .sm-user-ui .sm-gallery {
        margin: 0;
        }   

    .sm-user-ui .sm-gallery-cover-container {
        margin: 0 12px 12px;
        }

}

patkok

Thank you so much @Hikin' Mike . Your code are work for me. But i remove sm-user-ui for first page. it's looks nicer.

Sorry for trouble you, I would like to ask few more questions.

1. How can I make my text bigger at mobile but not affect pc version?
2. Is it possible to make my text in to middle with few margin or px? Mean not so corner with it. Just for the text

Thank you so much Mike.

Hikin' Mike

@patkok said:
Thank you so much @Hikin' Mike . Your code are work for me. But i remove sm-user-ui for first page. it's looks nicer.

Sorry for trouble you, I would like to ask few more questions.

1. How can I make my text bigger at mobile but not affect pc version?
2. Is it possible to make my text in to middle with few margin or px? Mean not so corner with it. Just for the text

Thank you so much Mike.

For the first one just add this:

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

    .sm-page-widget.sm-page-widget-18742682 h2 {
        font-size: 18px;
        }

}

For your second question. I don't own a mobile device so I use this: http://quirktools.com/screenfly/#u=http://www.patrickkok.com&w=414&h=736&a=37&s=1

I'm not seeing a lot of white space like your screen print shows.

patkok

Thank @Hikin' Mike for your time to help out. The 1st question still the same cannot be solve. The reason of I need help because text shown at PC is very small while Mobile size is looks nicely. I print screen to show you the css code.

Question 1 :

Mean Question 2 cannot be solve right? Is there anyone can help me out for this, for people who read the text will be quite tough to read it.

Thank you for your time. Hope to hear from you soon.

Regards,
Patrick

Hikin' Mike

Before I go any further, you might want to look at your site on different screens. Using the link I posted above, your site is a mess on smaller screens.

patkok

@Hikin' Mike yes , i did take note about it. i wondering how can i make it better on it. Is that any suggestion from you?

thanks

Hikin' Mike

@patkok said:
@Hikin' Mike yes , i did take note about it. i wondering how can i make it better on it. Is that any suggestion from you?

thanks

For starters I would remove ALL of the code that controls your Testimony section.

Hikin' Mike

@patkok said:
Mean Question 2 cannot be solve right? Is there anyone can help me out for this, for people who read the text will be quite tough to read it.

Thank you for your time. Hope to hear from you soon.

Regards,
Patrick

Add this to your CSS under your @media only screen and (max-width: 640px) {:

    .sm-user-ui .sm-page-widget-text {
        margin: 0 12px;
    }

patkok

@Hikin' Mike , I really wanna say thank you for your help. It's really what I need it.

1. For my website messy on that. Is it need to do something call "divide" as break down?
   Sorry, I'm not familiar with CSS code actually. I'm really new at this.

2. Back to question 1, the code I tried but is not working regarding make text smaller at mobile yet not affect dekstop version.
   

Thank you Mike. You had saved me a lot for the previous CSS code. But no force to you to help me if my issue cannot be solve. I just hope to seek your advise on there.

Lille Ulven

If you try to reduce your media block to this:
@media only screen and (max-width: 650px){
h2 {
font-size:12px;
}
}

Does that have the effect you want? I have a feeling that you might have restricted it with the sm-page-widget.sm-page-widget-18742682 a little too much, maybe.

Good luck

Lille Ulven