Content box not good size in mobile version

Add css
.entry-content .content-box {
max-wdth: 100%;
height:auto;
}

Or remove width & height property from below css in your additional css
.entry-content .content-box {
border-radius: 5px;
border: 1px solid;
padding: 2rem 2rem 1rem 2rem;
margin: 0 0 2rem 0;
font-weight: normal;
color: #FFF;
width: 370px;
height: 405px;
font-size: 13px;
text-align: left;
}

• This reply was modified 5 years, 2 months ago by Saurav Sharma.

Hi @valetrends

Well you could add the following CSS (with a media-query)

@media screen and (max-width: 576px) {
.entry-content .content-box.bfb1 {
  margin: 0 auto;
  width:100%;
  float: inherit;
  max-width: 100%;
  height: auto;
}
}

This will apply to small devices portrait and landscape.
Looks good here, when the code above is applied.

Best regards
Aris Kuckovic

Yes Aris that worked.

What did this do really? I am trying to learn more code so it would be interesting to hear why this worked?

Could the same code be applied to other content as well to make them mobile friendly? For example images and other visuals?

Hi again

I’m glad it worked ??
What is did is it applies to screensizes that fits the “mediaquery” – which is 576px.
576px corresponds to a mobile in landscape mode – you know, you flip it for widescreen.

You can read more about mediaqueries here:
https://devfacts.com/media-queries-breakpoints-2020/

You can’t apply the exact same code to other elements.
This depends on the element-class.
Chrome has a built-in inspector, which is REALLY good to use, when trying to find out what the element-classes are – have a look at it here:
https://designtlc.com/use-chrome-inspector-edit-website-css/

Please let me know if there’s anything I can do ??

// Aris Kuckovic