Streaming live at 10am (PST)

[RESOLVED] Paragraph custom spacing


#1

So I have a nice 4 lines paragraph that looks great on desktop size. But, when going mobile, the paragraph looks bad. If I manually change the spaces in the mobile, it affects the other resolutions as well. How can I make changes independently? or what would be the way to customize text things for just 1 resolution size?

Thanks a lot!!!

And if not clear, I can try to recreate an example.


#2

Modifying the font size and line height should take effect only in the screen size you have change it in. Nothing you change in the smaller screen sizes should effect bigger screen sizes. Something else might be going on in your designer. If you are able to post a public link to an example I would be happy to take a look for you.


#3

Yes, I agree. I must be doing something wrong...

Because I have a simple paragraph, and I want to leave some spacing, but only int he mobile version... and when I do that, I also get the spacing in the other sizes, lets see if you can point me in the right direction.

http://testbkphoto.webflow.com/
https://webflow.com/design/testingwebflownow?preview=9077cb5f257103948b420ce38b571af3

Thanks so much!!!


#4

works as expected for me...

see screen cast: http://screencast.com/t/7tz4pelxUge9


#5

ok, let me explain it better.

if you see the example now, you will notice there are 2 paragraphs. Divided by a simple space in the middle.

My question is... if I want to remove the space in the middle, but only on the mobile version, can I do that??? Because when I remove the space, it removes it across all screens... and I wanted to control the spacing within the paragraph individually. Makes sense?


#6

The example you provided only has one paragraph in it. You are adding line breaks to that paragraph by hitting enter to create the appearance of two paragraphs. What you want to do is add new paragraph blocks with the same class name. You can then adjust the css properties on each screen size without effecting the others.

To further explain, when you add a paragraph element to your design you are adding a "p" tag to your html, which represents a paragraph. When you are putting your content into that tag and hit enter you are adding a "br" tag or line break to the html not a new paragraph.

When adjusting the appearance of the design at the different screen sizes your are adjusting various CSS settings to make the changes without actually changing the structure of the html. If you delete elements from your design you are actually removing the html from the whole design.

I hope this helps.


#7

is this what your wanting to do?

add 2 paragraph blocks and and increase margin to add space between paragraphs...

http://screencast.com/t/aMI49sKpiu


#8

Davidn, I totally get it now... Thanks so much for the detailed explanation. Makes sense, and I was kind of under that idea, but I just needed to confirm it with someone like you.

Thanks again... have a great weekend smile


#9

Hey bryantay, yes that was exactly was I was looking to do... Thanks so much for taking the time in creating the screencast. You rock!!!

Both of you, Bryantay & Davidn, thanks a lot for the help!!!

This case is now closed sunny


#11