Docs

[John]

Hey guys,

So I’m working on a site at the following URL:

Lansing Website Design

And whats happening is when some looks that the site in the bigger phone view (or so the preview says) I’m getting borders of an image that extend way beyond the image, take a look:

http://prntscr.com/bwqfwo

Is there a way I can get the border to stay in proportion to the image size when they are viewed on this platform?

Thanks!

[Christopher]

Hi there,

Please update your code to :

.x-img-thumbnail {
    border: none;
}
a:hover.x-img-thumbnail img {
    border-color: #670A16;
}

Add this code too :

.x-img-thumbnail img {
    border: 1px solid #EF4723;
    padding: 4px;
}

Hope it helps.

[John]

Thanks a lot it worked great, I have one more CSS question that I need some help with.

I have a featured list on the same page: http://www.purposefulmarketinggroup.com/

About 1/2 way down and if on the mobile previews you will see that the featured list is aligning to the left of the screen.

http://prntscr.com/bwxocg

I would like the text-align:center to push it to the middle but so far I can’t get the rule to stick; can you plz help.

THX

[Rupok]

Hi there,

Thanks for writing back! You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 767px) {
.x-feature-box-title {
  text-align: center;
}
}

That;s for what you referred but I don’t think you want to make the text-align center only. So you can try the below code instead :

@media only screen and (min-width: 600px) and (max-width: 979px) {
.x-feature-list .x-feature-box {
  display: block;
  margin: 0 auto !important;
  max-width: 450px !important;
}
}

Hope this helps.

Cheers!

[John]

Worked like a charm thank you so much!

[Rue Nel]

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts