- This topic has 20 replies, 2 voices, and was last updated 5 years, 12 months ago by
.
Hi guys,
I put an outline in the mobile text box. But for me it’s too small. It’s not so good for reading the text. I want that box a little wider. Do you have custom code doo make it a bit wider?
thanks,
Edwin
Hi Edwin,
I hope you are well today and thank you for your question.
I am not sure what you are referring as “mobile textbox outline” so could you please share the screenshot of it so that I can help you?
Best regards,
Shufflehound teamIm not sure how to explain it haha. Let me give you a screenshot.
You see some shadow around the text-box. Don’t know how to call it else.
For me it’s a bit to narrow, which make the text harder to read, but i need that text-box for contrast.
So now I need custum code to make the textbox a little wider. Clear now?
Greets,
Edwin
You can make textbox wider by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media (max-width: 550px) { .home .container.entry-content { max-width: 90% !important; } }Thanks guys, but this only works for the home page and preferably i dont wabt it there. I rather have it in my blogposts
Could you please share me the blog posts page URL from your site so that I can help you to achieve it on that page?
https://natureshealthyroots.com/2018/07/04/best-supplement-for-knee-cartilage-repair/
Yeah sure, but I want this on all blog posts and pages. Thanks!
Please try using below custom CSS code instead of above.
@media (max-width: 550px) { .container.entry-content { max-width: 90% !important; } }Looks stunning now guys, thanks! Only i dont want this on the homepage. Any chance you could get me some code for this?
K8nd regards,
Edwin
Then please use the below custom CSS code so that it will not work on home page.
@media (max-width: 550px) { body:not(.home) .container.entry-content { max-width: 90% !important; } }Hi guys, thanks for the help!
Only for some reason its back to normal on mobile, while i didn’t change anything. Can you check again whats gone wrong? Thanks!
Please try changing above shared CSS code as following.
@media (max-width: 550px){ body:not(.home) #page-container .container.entry-content { max-width: 90% !important; padding: 0 !important; } }Thanks guys, but on mobile is to wide now. I dont see my outline of the text box anymore
Then please change the above CSS code as following and make changes in it according to your needs.
@media (max-width: 550px){ body:not(.home) #page-container .container.entry-content { max-width: 90% !important; padding: 0 15px !important; } }hey man thanks for the help, but all of the css dont work anymore. you have any idea why? Im talking about mobile than 🙂
Hi Guys i tried that so as all the plugins. The only one that affects the mobile wide is unyson. If I switch unyson off my mobile isn’t responsive anymore, when i switch it on it’s responsive but doens’t react to the custom code anymore..You guys have any ideA?
Solution for this topic
I can see you are not using exact CSS code shared above and missing the #page-container causing the CSS not to work.
You have to make the CSS code more specific by using the exact CSS code shared below.
@media (max-width: 550px){ body:not(.home) #page-container .container.entry-content { max-width: 90% !important; min-width: 0 !important; padding: 0 15px !important; } }Yeah this is awesome guys. Thanks!!
