Typography fields problem

Hello!

I have a little problem in typography fields section.
when i set for example ” widget title ” font size to 13px, after i click save button the line height of ” widget title ” becomes 13px too, automatically!
and when i remove that line height number ( 13px ) and click save button, the line height is still 13px in all of my website pages!
I just want to change font size, without changing the line height

Thanks.

Hi,

Could you please provide us your admin access so we can check it?

Regards

here you are:

But where we can see some widgets on your website?

its not only about widget title! its about all of options in typography section.
for example, if you change ” text font ” font size, this problem will happens.

please, first see this page:
http://www.kenvuccy.com/shop/shirt/mango/five/

then go to my panel and change the ” text font ” font size to 13.5px
and then refresh the above page …

thanks.

Yes, we tried. And then the description font was changed correctly. https://gyazo.com/2ced01c8eecaf89c9648795a4c9711b2

i don’t know where you set the font size to 14px, cause i cant find the number ” 14px ” in my website panel

but ok. i will show you my probelm with screenshot ..

here is my normal website page without changing the font size:
screenshot: http://uupload.ir/files/8osv_1.png

and here is a screenshot of my website page after i ” ONLY ” change the font size to 13.5px
screenshot: http://uupload.ir/files/tvz_2.png

as you can see, website ” AUTOMATICALLY ” set line height to 13.5px too!
and even if you remove that 13.5px from website panel, the line height is still 13.5px

Yes, you need to explicitly set the line height as well. For example, we set it to 18px. Please, check now.

that’s exactly what i have problem with!

the normal line height of my site is i think something near 28px. when i set ” text font ” line height to 28px everything looks ok in product pages! but in other pages i have problem like the screenshot below:

screenshot: http://uupload.ir/files/vasm_3.png

as you can see a gap will appear in some of my website sections. and in the text which is in bottom of marked section in screenshot, the line height is not normal ( its not 28px )

+ just mention that before i change the line height, everything is ok! no gap! no anything!

The gap exists there even without line height set in Theme Settings since it is a standard margin for all widgets titles set in our theme CSS styles. If you want to remove it add this code snippet to the Custom CSS

.widget-title, .widgettitle {
    margin-bottom: 10px;
}

As for line height in that widget, you need to wrap in <p></p> HTML tag to apply CSS rules properly.

Regards

Thanks. but if it’s possible, for the next update please solve this problem that when user wants to change the font size, he/she must change the line height too.

OK, we will take a look at this problem in the future.

Regards

Thanks a lot.

just one more thing …
in custom css section, if user add some code to ” tablet ” and ” mobile ” section, the code will work this way:

for example for tablet is something like this:

@media only screen and (min-width:480px){
SOME CSS CODE
}

and for the mobile is something like this:

@media only screen and (max-width:480px){
SOME CSS CODE
}

the problem is, if someone open the website with a device with exactly 480px, none of those code will apply for that user
+ just remember that ” 480px ” is only an example number…

But where did you find this bug? There is no such code in our theme.

let me explain the problem again

basel theme have an option that user can add custom css to website. right?
in this adrres: dashboard > theme settings > custom css

in custom css section, user have five option:
1. global custom css
2. custom css for desktop
3. …
4. …
5. custom css for mobile

ok?

for example, i want to add the css code below to both ” custom css for desktop ” and ” custom css for tablet ”

.footer-container{
border-top:1px solid #000
}

right?

when i add this code to custom css section ( both for desktop and tablet ) , this custom css will work like this in user browser:

for desktop:

@media only screen and (min-width:922px){
THE CSS CODE HERE
}

for tablet:

@media only screen and (max-width:922px){
THE CSS CODE HERE
}

the problem is, if someone open the website with a device with exactly 922px width, none of this code will apply.

you must change thos number to something like this:

for desktop:

@media only screen and (min-width:922px) ……….

for tablet:

@media only screen and (max-width:921px) ………

But we understand you. The point is that there is no place with the same endpoint number. Why do you think that there are wrong media queries in our theme? Did you see the bug somewhere?

yes, the user can’t see this numbers …
but if user add some css code, this number will apply in the browser

i have an example for you in this address: http://www.kenvuccy.com/contact/
here is a screenshot: http://uupload.ir/files/6wt6_5ry5y.jpg

i add a custom css on that block, just please open the page with “chrome” browser.
try to change the browser windows size ( the codes will change online while you change the windows size ), so you can see the bug in the numbers …

But you can check the code and see that media queries have points 991 and 992. Not 992 and 992 as you describe. https://gyazo.com/09790f89199d5a281ed5096cfe4ad65c

[Author]

Posts