OfficialBoog Posted April 1 Share Posted April 1 (edited) I've noticed when viewing the Mobile version of my website that the heading for it is off-center and is hugging the right side of the webpage, I've tried adjusting the size of the text as well as adjusting the size of the block. I've had some results where the text has gone from this(See Ex. 1) to somewhat of a correct format(See Ex. 2). However once it had the 'correct' format, it was still hugging the right side of the page and at this point reached a size small enough if ruined the look all together. How can I go about fixing this issue with the heading? It's almost as if it doesn't allow me to utilize the space I have set for my block, no matter what I do I can't get the text to leave the right side of the page. Adjusting the alignment did no good either, it adjusted the text to align on the left while still hugging the right side of the page, this was the same for all alignment changes. I've also noticed that while making these changes it also changed the way my Desktop website appeared. How could I go about making this change specifically for the mobile version of my webpage? IMAGES FOR EXAMPLES ARE PROVIDED AT THE BOTTOM! Ex. 1 (How mobile looked, hugs right side of page): "H E L L O" Ex. 2(Somewhat of a correct format, while being too small + hugging right side of page) "hello, we- lcome to the web- site" The goal is for my mobile website to display the header in the center of the page, just as it does on the Desktop version of my website. I know some adjustments will need to be made in regards to text size and such which I'm fine with, I'm just genuinely looking for a way to properly have this scaled, positioned, and only affect the Mobile version of the site. Any information would be a massive help, thank you in advance! Edited April 1 by OfficialBoog Noticed it affects my Desktop website after posting! Link to comment
tuanphan Posted April 2 Share Posted April 2 Can you share link to this page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
OfficialBoog Posted April 2 Author Share Posted April 2 6 hours ago, tuanphan said: Can you share link to this page? Of course! Link To Website, on the Desktop website you can see the header is clearly too small from me making adjustments trying to fix the mobile Website, and the Mobile Website is still having it's original issue Link to comment
Solution tuanphan Posted April 4 Solution Share Posted April 4 Not sure why, but I see some code appears in source code, make text align right You can use this code to Website > Website Tools > Custom CSS to fix this Or you try remove section > add new section > Add text again @media screen and (max-width:767px) { h4[style*="margin-left"] { margin: 0 !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment