Hello Shopify folks, (Theme is Sense)
I’m brand new to shopify and trying to get the width of the text more so it doesnt create another row.
In desktop view its looking good but in mobile view it looks like this:
I think i need to add a piece of code here:
Any help you could give would be fabulous.
Cheers,
Myhairvitamins
Looks like you have some margins or padding going on there. I would right click on that text, choose inspect, and then the browser will show you which themes and styling is applying, including inherited things that may not be obvious. It will also show you when you are hovering over the text in the “elements” window, what the padding (green), borders (orange) and margins (red) are. Takes a bit of getting used to, but i’ve used it loads to track down niggling display issues. The Computed tab in that same window will show you all of these in numerical terms as well.
The left 50% and transform thing should work for centering, but maybe try “text-align: center” instead see if that changes things.
Or in that media query section, put something like
font-size: 0.8rem;
Which will make the text on mobile a little bit smaller to get it to fit, but masking the issue.
Hope that gives you some things to try.
Kevin.
Hi thank you so much for your reply. I think the padding is to move the text down a little bit so it doesnt clash with the things above.
The thing is if i delete some of the text it works good but i want to fit more text, hopefully you understand what i mean:
Hey i just tried with setting the font size rem at 1.3 it worked BUT the text appears too small on mobile view..
Is there any solution for this ?
You can set the padding of the top and bottom separate to left and right, if it looks like that might be doing it. Or you might be able to set negative margins to give the text more room.
Try adding:
margin-left: -20px;
margin-right: -20px;
.. to that mobile media query. If you make them bigger, the text will have even more room. It would be better to find the source of the padding issue, but that might fix it in the mean time.
Ok, took a quick look, and this will sort it for you:
@media screen and (max-width: 749px)
.multicolumn .title {
top: 20px;
width: 100%;
margin-left: 20px;
}
It will then look like this…
If that works, please accept as solution.
Good luck!
Kevin.
Maybe its the space between 20 and px. I think it needs to be 20px, not “20 px”. Increase or decrease this if it doesnt look quite right.
