Mobile View Post/Page – Applying Margins/Padding
-
Hi there,
I recently purchased the ‘Boxed Bio’ theme, which I love, but I´ve been trying to solve an issue for over 24-hours.
The text of my first two posts and the ‘about’ page, runs right up to the left and right edges of the mobile viewport. Naturally, this makes it harder to read as well as visually unappealing. The desktop and tablet screens are fine.
In addition to reading articles and watching tutorials, I’ve tried changing the media width and various CSS codes in the Customise/Addtional CSS and Style areas. Nothing, seems to work…
.site-content{padding:0 20px;}
.content-area{ padding-left: 50px; padding-right: 50px; }@media screen and (max-width: 600px){
#comments, #respond {
padding-left: 10px !important;
padding-right: 10px !important;
}
}Can anyone help with this, please? I’m not CSS savvy, but I’ll give anything a go.
Thanks
The blog I need help with is: (visible only to logged in users)
-
Hey there @existentialmentalhealth, I had to tinker a bit to spot the right code, but I think I’ve found the right CSS. Have a look and let us know if we’ve got it!
@media screen and (max-width: 600px) {
.entry-content, .wp-block-post-title {
padding-left: 50px;
padding-right: 50px;
}
} -
Hey Supernovia! Thank-you, so much! It works!
My goodness, what a headache that was. Thank the stars for this community forum and the amazing people and staff on it.
Also, it’s good that I´ve been forced to take a look at CSS now, which had terrified me before. :-)
All the best…
-
Hi Supernovia, sorry; if I may just trouble you with one other thing regarding the above enquiry.
At the bottom of the two posts, the same problem still exists with respect to the ‘author’, ‘date´, ‘tag’ and the copyright. Could you possibly put in the CSS code to fix that, too?
Eternal thanks, once again.
-
Absolutely; thank you for catching that. Having a closer look at the code, I decided to use this instead:
@media screen and (max-width: 600px) { .has-global-padding { padding-left: 50px; padding-right: 50px; } }That way anything that’s supposed to have a padding should get 50px on either side on screens less than 600px wide.
If you want to, you can reduce that a little to give yourself more space, and it should reflect site-wide.
-
That’s absolutely brilliant, Supernovia. I’ve taken it down by 10px to 40px, and it’s just perfect. It’s also reflected site-wide, too.
Thanks, again.
-
-
Hi Supernovia, it’s me, again.
My wife’s phone is a Samsung A22, whilst mine is an A22 5G with a slightly bigger screen. As a result, the website looks different on our respective devices. It’s perfect on mine, but distorted on hers.
For instance, where mine reads…
EXISTENTIAL
MENTAL HEALTH (without the vertical gap)
Hers, reads…
EXISTENT
IAL
MENTAL
HEALTH (without the vertical gaps)
Is the CSS code specific to my A22 5G phone, which has a 1080px width? Her A22 px width is 720px, which immediately states the issue.
Is there a responsive CSS code that adapts, to different phones?
Also, there’s now a no-entry circle whenever I hover over the ‘about’ button, in the Additional CSS, preview mode.
I’m sorry to bother you with all of this, again.
Thanks.
-
Hi,
Also, there’s now a no-entry circle whenever I hover over the ‘about’ button, in the Additional CSS, preview mode.
I think it’s just showing you to edit that in the Site Editor rather than in Customize, so no worries there.
Re: sizes adapting to different screen widths, normally the font sizes will adapt — does she have any settings on her phone that could be overriding text sizes? I’ve got a tiny phone and it’s doing okay here. I’m looking at the text on the front page for that; is she seeing it somewhere else?
If you want your padding to be adaptable, you make change the CSS to choose a percentage of the screen width if you’d like, such as 5% or 10%.
Our theme designers are also taking a look, so if they make an update that adds adapted padding, I’ll let you know.
-
Hi, yes, it’s the text on the main landing page that’s been distorting, on her phone. Something, just occurred to me, though, which I’ve just checked out on her phone, and I’m embarrassed to say that her font size was on setting 5 of 8. I’ve tried it on 2 and 3 and the webpage is fine. Sorry.
I’m glad that Automattic are looking at the original code, though. I sent them a message before posting on here, and I’m yet to hear back. If they’re sorting it out through you, then that’s great.
Right, that’s the last you’ll hear from me. Thanks, for all your help.
-
Thank you for the update! No need to apologize as we are happy to help and it can certainly be concerning when your site does not display as expected. Feel free to reach out again if you run into anything else we can assist with!
-
Hi there. I didn’t think I’d contact you again, but here we are.
I’ve just set up a feedback form on the website, but on the mobile it’s coming out incorrectly. The input field is a slim column and the righthand side of the block is up against the edge with the lefthand side, inset too far. I brought up the css coding, but it’s beyond my skill level at the moment. If you could widen the input field and adjust the edges, I’d be quite grateful. I think this mobile margin issue within Boxed Bio, really needs to be looked at.
existentialmentalhealth.com
Thanks, in advance.
-
-
Hi there, thanks for reaching out, I’ve checked out the contact form on your site and can see the width issue you are referring to.
I’ve just set up a feedback form on the website, but on the mobile it’s coming out incorrectly. The input field is a slim column and the righthand side of the block is up against the edge with the lefthand side, inset too far.
This is not a theme issue specifically, but is related to how the width settings on the Form Block work. Currently there is no way to specify a mobile-only width, so when you set specific widths in the block settings (25% in the case of the name input) that width is set on mobile and desktop views alike.
In addition to this, I can see that in the parent Form Block you have added 150px of padding, which pushes all form elements to the left. On mobile, this takes up much more space than it does on desktop (almost half of the layout) so that further reduces the area. These settings appear to be in conflict so I wonder if there is not a better solution. CSS would not be able to help here.
I took some time to play around on my test site and it seemed to me that using a few columns to structure the layout might work better. You can set column widths for desktop but on mobile they default to full width to use the smaller screen space. This allows you to remove the 150px padding and 25%/75% width settings of the Name/Feedback form elements.
You can try this code by adding a new Paragragh Block to your blog page template (in the place of the current form you have created) and then pasting in this code:
<code role="textbox" aria-multiline="true" aria-label="Code" contenteditable="true" class="block-editor-rich-text__editable rich-text" style="white-space: pre-wrap; min-width: 1px;"><!-- wp:jetpack/contact-form {"subject":"emh - feedback","to":"(email visible only to moderators and staff)","customThankyouHeading":"Thanks, your message has been sent","style":{"color":{"gradient":"linear-gradient(135deg,rgb(238,238,238) 0%,rgb(129,159,200) 47%)"},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}}} --><br data-rich-text-line-break="true"><div class="wp-block-jetpack-contact-form has-background has-background" style="background:linear-gradient(135deg,rgb(238,238,238) 0%,rgb(129,159,200) 47%);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:columns --><br data-rich-text-line-break="true"><div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} --><br data-rich-text-line-break="true"><div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:jetpack/field-name {"required":true,"requiredText":"(Optional)","borderRadius":30,"borderWidth":1,"labelFontSize":"15px","fieldFontSize":"13px","lineHeight":0,"inputColor":"#634b4c","labelColor":"#634b4c","fieldBackgroundColor":"#abb8c3","borderColor":"#634b4c","shareFieldAttributes":false} /--></div><br data-rich-text-line-break="true"><!-- /wp:column --><br data-rich-text-line-break="true"><br data-rich-text-line-break="true"><!-- wp:column {"width":"66.66%"} --><br data-rich-text-line-break="true"><div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:jetpack/field-textarea {"label":"Feedback...","requiredText":"(required)","borderRadius":30,"borderWidth":2,"labelFontSize":"15px","fieldFontSize":"13px","lineHeight":1.5,"labelLineHeight":1.5,"inputColor":"#634b4c","labelColor":"#634b4c","fieldBackgroundColor":"#abb8c3","shareFieldAttributes":false} /--></div><br data-rich-text-line-break="true"><!-- /wp:column --></div><br data-rich-text-line-break="true"><!-- /wp:columns --><br data-rich-text-line-break="true"><br data-rich-text-line-break="true"><!-- wp:jetpack/button {"element":"button","text":"Send Feedback","textColor":"primary","borderRadius":24,"width":"","lock":{"remove":true},"className":"is-style-outline","style":{"typography":{"fontSize":"10px"}}} /--></div><br data-rich-text-line-break="true"><!-- /wp:jetpack/contact-form -->The code you paste will be automatically converted to blocks, and you may find that this works better on mobile as you are hoping.
Let us know if you need further assistance or if you have any questions.
-
Hi there, thanks so much for your help with that.
I automatically assumed that it was a css issue, when in fact, as you said, it was a block settings problem. I’ve been able to rectify it, now.
There was one other issue, that I wanted to mention, which might not be a css problem, either. I’ve tried all I can to play around with the blog template, but I can’t seem to change something.
In the mobile view, on the ‘About’ page and the articles, there are two images of groups of people, one below the other and separated by a quote. The lower image has two light-green stripes on either side, which I can see is the result of the left and right padding. I´m trying to remove that padding just for the image, but when I do, the text below changes, as well. Is there css code that I can add to the ‘Additional css’, which will remove the green stripes to look like the image above it, whilst maintaining the left and right padding in the text?
Thanks for your time and effort with all this, and I’m sorry for the exasperated tone in my previous message.
-
Hey there,
It looks like we’re getting there!
The CSS you need to remove that padding from that block only is:
/* Remove padding from header image About page */ .wp-block-group.has-foreground-color.has-tertiary-background-color.has-text-color.has-background.has-link-color.wp-elements-2e7778be5104f8c69b2e0e595aae4fa0.has-global-padding.is-layout-constrained.wp-container-core-group-layout-4.wp-block-group-is-layout-constrained { padding-left: 0px; padding-right: 0px; }This CSS here would be cancelled out as a result:
.has-global-padding { padding-left: 20px; padding-right: 20px; }I hope this helps!
-
Hi there, thanks a lot for that solution.
I left in the global padding code (which is keeping the text away from the edges), below the ‘remove padding’ code you’ve sent and they work, perfectly. The image is stretched to the edges with the text below indented on both sides.
Thanks, again. I appreciate all the staff responses.
-
Hello, I’m sorry to bother you again.
I’ve just set-up separate pages for long and short articles. On the mobile view, I’m trying to get the words ‘Weekly Commentary in 500 Words or So’, to fit below ‘Right Now In Mental Health’. At the same time, I’m trying to fit ‘3 to 5,000 word articles – Fortnightly’, below ‘The Bigger Read’. You can see what I mean on the Desktop view, but on the mobile, I can see that it’ll obviously have to be broken up to look something like:
Weekly Commentary
in 500 Words or So
&
3 to 5,000 word articles
– Fortnightly
Is this possible?
Thanks, again.
-
Problem solved. I’ve realised that I should have put them into columns, instead.
Job done.
-
Hi there, I just need to ask three things.
Firstly, this message has started to appear in a red box at the top of the website, in the editorial mode.
‘The “wpcom-live-preview” plugin has encountered an error and cannot be rendered.’
I’ve Googled this, but there doesn’t seem to be a suitable explanation. How can I resolve it?
Secondly, is there a CSS fix to make the text size in mobile view one size larger, without it affecting the desktop view? When I adjust the text size in posts on the desktop, it has to be massive for it to enlarge on the mobile view, which doesn’t look great on the desktop.
Thirdly, in the top right corner of my website, there’s an olde world map with the words ‘Global Anxiety & Depression Map’. I’ve tried to place this text on to the map as a link, but when I do, it simply replaces this text with the actual URL, instead. Again, is there a CSS fix around this?
Many thanks, in advance.
- The topic ‘Mobile View Post/Page – Applying Margins/Padding’ is closed to new replies.
WordPress.com Forums