Lists shifted to the edge of the screen
-
Alslamu Alikum..
I noticed that lists in my posts appear too close to the left edge of the screen as you can see in this screenshot in both mobile and desktop website versions to all my posts not just one.And also when i open my website menu i noticed that my pages title had shifted towards the right as if they are parenting the page beneath it instead of being aligned as they used to be.
So how can i fix these two?
Here are the screenshots:
lists indenting to the left (desktop version)list indenting to the left (Mobile version)
One of the posts link:
View PostThanks in advance.
The blog I need help with is: (visible only to logged in users)
-
Hi there,
Thanks for including the screen shots. It made this much easier to confirm.
The list markers appearing to the left of the margin on desktop is most likely by design. The CSS code used to style lists allow for this type of alignment, and it’s a design choice by a theme designer whether they want it weighted into the margin, or indented in the content.
But I would definitely expect there to still be a margin on mobile, so I’ve reported that to our developers.
I’ve also reported the indentation on the menu to them. We’ll update you here once we hear back from them.
-
Just an update: Fixes for both these issues are in progress and the theme should be updated soon.
-
Alslamu Alikum @kokkieh
1st of all thank you for taking the time to go through this report and help me fix it and sorry of this late response.
I didn’t know you are following it till i returned back to a report i submitted two days ago about another list’s alignment issue and found your response on it providing a link to this post which is a good thing because i couldn’t find before and because now i realized i didn’t check the notification option to this thread nor the other one and therefore i didn’t know you have submitted these comments earlier.As i mentioned in the other thread the menu alignment issue was fixed Alhamdu llah and so did the 1st issue regarding how close the lists are to the left edge of the screen. Yet as you probably read in the other thread another issue appeared which is that not all the list’s points became part of the point itself instead of a bit separate while all the points text align from the left side with each others.
Here are the screenshots:
– Website mobile versionInstead of aligning with the line before it in the same point like these ones:
– Number points listThe second issue is that lists in general align with paragraph’s left side as you can see in this screenshot: Wrong list indenting
instead of indenting a little to the right like a child to the paragraph like the one in this screenshot: Correct list indenting
I’m not sure if this is a separate issue than this one regarding lists alignment or it’s just part of the fixing process and this is why i reported as well.
Lastly, thank you for working on this issue even though i didn’t follow up with you on it all that long and also my appreciation to @thesacredpath for responding to the other thread because i couldn’t comment on it to at least say thank you.
I have opened the sharing option for the screenshots so it should be available now, if the links provided still not showing them please let me know so that i could re-upload it again maybe that would help en shaa Allah.
I wish you two a pleasant day ahead en shaa Allah.
-
What you’re referring to as incorrect list indentation is actually correct. :)
It’s the list style that the theme’s designer chose. Those bullet points are centered bullets, whereas the numerical points behave more like text.
You can indeed change the list style via CSS https://en.support.wordpress.com/custom-design/custom-css/ but overall nothing is necessarily wrong here, just a design choice by the theme’s designer.
-
I see what you mean staff-blorbo, thank you. The thing is this wasn’t how the bullet and the numerical points used to be like before this all started with the alignment issue in the beginning of this thread as you can see in this screenshot: post-issue screenshot
Now that the 1st issue of the lists being so close to the screen’s left edge apparently got fixed the issue of list’s points being part of the point’s text started so this is why i saw it as another issue.
The problem is that i’m not a premium user therefore i have no access to making permanent adjustments to the theme using additional css [not to mention i don’t know how to do it even if i had access to it], so i was wondering if it’s possible to contact the theme designer and ask him/her to fix it for me or this isn’t possible for free plan users?
-
Hi modatherabozaid, I’m hoping I’ve understood correctly. Following the entire issue:
– First the lists were too far to the left
– Now they align with the paragraphs instead of going into the margins
– But you don’t want them to align with the paragraphs; you want them further indented.
Am I understanding that correctly?
As far as I can see, the lists currently indent as they are supposed to (lined up with the paragraph, a popular design choice) whereas before they went into the left margin.
You linked to “correct list indenting” but that screenshot is not from this site, correct? It’s from a different design. Can you let us know where that is coming from?
-
found your response on it providing a link to this post which is a good thing because i couldn’t find before
I suggest that you bookmark or otherwise save a link to your forums profile page, which has archive links to topics that you’ve started and topics on which you’ve made replies.
-
Alslamu Alikum @supernovia,
1– First the lists were too far to the left
Yes that is correct. Yet i would also add to it that now that the 1st issue [of the lists being far to the left] was fixed, the bullet and numerical points becoming part of the list point’s text started to appear which wasn’t happening before. This is why i reported it as another issue after the 1st issue was fixed.
2– Now they align with the paragraphs instead of going into the margins
3– But you don’t want them to align with the paragraphs; you want them further indented.
That is also true but to clarify it this how it was already since i started using this theme not something that started to happen. Yet what i forgot to mention is that this isn’t how it shows in the editor. In the editor the lists show as i want it to appear [indenting a little further not aligned with the paragraphs] yet in the preview or when i publish my posts it becomes aligned with the paragraphs as you can see in the following screenshots:
– block editor screenshot– preview
You linked to “correct list indenting” but that screenshot is not from this site, correct? It’s from a different design. Can you let us know where that is coming from?
Sure, it’s from my blog on Quora: Quora post
-
Alslamu Alikum @musicdoc1, thank you for this tip. I would keep it in mind en shaa Allah.
I found that checking (Notify me of follow-up replies via email) in the thread actually quite useful to follow the new replies on the thread which i didn’t notice i have missed checking before.
Anyway thanks for the tip. Have a pleasant day ahead en shaa Allah.
-
Ok, so the short version is that list styles on the published site don’t match list styles in the editor when using the Redhill theme.
They should, so we’ll get that taken care of. :)
They won’t match list styles on Quora though, since that’s a totally different site. ;)
-
Alslamu Alikum staff-blorbo,
Thank you for helping out on this. I’m glad to hear so.I wish you all the best. Have a great day ahead en shaa Allah.
-
-
-
Okay thanks for the update.
I’m not sure if this might help but since this issue have been around for a while now i started to learn html and css and experiment a little and i wrote this code which actually fixed the problem in the published posts in both mobile and desktop versions yet it messes it up in the block editor itself as you can see in these screenshots [if you want me to upload them to the website media library instead please let me know]:
<ul style="padding-left:4em;text-indent:-1.4em;"><li> In case it didn't paste the text style in mobile web block editor it certainly won't work using the App.</li> </ul>I understand that it’s written in a horrible way yet this is the best thing i managed to do so far.
The other problem about this code is that it has to be applied to every list i create instead of having it embedded into the block’s settings automatically which means that not just it isn’t that efficient but also it needs to be applied to all lists in the previous posts in my website instead of fixing them all automatically which is frustrating, not practical and inapplicable by all means.Anyways I thought about sharing it with you guys and hopefully it might make it easier for you to fix this issue sooner somehow en shaa Allah.
Again I really appreciate your help, time and update on this issue.
-
-
Alslamu Alikum staff-blorbo, no problem it’s okay :)
Unfortunately when i checked it out i found the issue still present. Is there anything i should do to or can do to fix it? -
-
- The topic ‘Lists shifted to the edge of the screen’ is closed to new replies.
WordPress.com Forums 