Tagged: , ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • December 18, 2018 at 5:03 pm #1046943
    kwlodar

    Helo,
    a have two problems:

    1. posts cover photo is too small and not inline with the txt on mobile devices:
    https://snag.gy/rJqPd0.jpg or https://snag.gy/QbFsI6.jpg
    both screenshots from: https://www.sensity.pl/blog/

    the similar situation appears on the single post:
    https://snag.gy/uBC3xw.jpg or https://snag.gy/G8fCLh.jpg
    both screenshots from: https://www.sensity.pl/zdrada-w-delegacji/

    in both cases problem disappears when the sidebar appears on the right (from 800×600 px screen?)

    2. The second problem is: I have two different font-sizes: there is 17 px font size on sinle post with no sitebar: https://www.sensity.pl/rodzaje-zdrady/ but other post with sidebar has 15px: https://www.sensity.pl/zaloba-i-swieta-jak-przetrwac-ten-trudny-czas/
    In Enfold settings I have set 15 px font and I haven’t enlarge it on posts without sitebar.
    What’s wrong?

    Thank you for your help!
    Chris

    December 19, 2018 at 9:46 pm #1047413
    Victoria

    Hey kwlodar,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
    .responsive .template-page .big-preview {
        padding: 0 0 10px 0;
    }
}

    The font is set to 100% on both pages but it is calculated depending on various factors and so it gets different results. It is better to set the font-size in pixels explicitly if you need consistency.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    December 21, 2018 at 11:39 am #1048114
    kwlodar

    Hello Victoria,
    thank you for reply! The code works perfectly fine! But isn’t it a global bug to fix? Enfold demo site has the same problem: https://snag.gy/xSTfdH.jpg

    I can understand your font recommendation but I don’t know how to implement it. I was sure it is fine to set global font size in Enfold/Appearance (?) section: https://snag.gy/ihwcop.jpg. Unfortunately it seems that doesn’t works like this. As I mentioned no font size modification was made on the post editing level. Do you have any idea how to make this consistent?

    Merry Christmas! and best regards,
    Chris!

    December 21, 2018 at 8:13 pm #1048316
    Victoria

    Hi kwlodar,

    Thank you for pointing out to the issue with the demo, I’ll forward it.

    Well, to be sure you have the 15px on ll blog posts you can use the css:

    
.template-blog.template-single-blog p {
    font-size: 15px;
}

    Thank you and Merry Christmas to you too!
    Best regards,
    Victoria

    January 4, 2019 at 4:28 pm #1050033
    kwlodar

    Works. Thank you!
    Chris

    January 5, 2019 at 8:10 am #1050262
    Rikard

    Hi Chris,

    Great, glad we could help and thanks for pointing out the problem. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    January 10, 2019 at 11:59 am #1052298
    kwlodar

    Hello, I have another styling problem. The font size is different on paragraph and different on bullet list.
    Example: https://www.sensity.pl/agorafobia-objawy-i-leczenie/
    font size: https://snag.gy/lRbPZ2.jpg

    As above:
    – no styling applied in post editor
    – 15 px font size set in Enfold/Appearance
    – @Victoria recommendation done.

    Any ideas?
    Regards!
    Chris

    January 11, 2019 at 8:09 am #1052622
    Rikard

    Hi Chris,

    Please try the following in Quick CSS under Enfold->General Styling:

    ul li {
  font-size:15px !important;
}

    Best regards,
    Rikard

    January 11, 2019 at 11:55 am #1052709
    kwlodar

    Hi Rikard,
    I did it and it works. Thank you.
    However, I’m concerned that such things have to be fixed with additional CSS code. Maybe I’m wrong but should globally font size setting solve the problem? Next I would like to change the font size I’ll have to remember about all this additional fixes like

    @media only screen and (max-width: 767px) {
    .responsive .template-page .big-preview {
        padding: 0 0 10px 0;
    }
}

.template-blog.template-single-blog p {
    font-size: 15px;
}

ul li {
  font-size:15px !important;
}

    First concerns a bug with displaying cover photo on the post list on mobile (same on our demo side) – details in my other post
    Second fix the font size on single post without sidebar. Similar problem as in this thread – details in my other post.

    I thing it is strange. That global setting in Enfold->General Styling->Fonts does not work for all fonts. Or maybe this are all bugs?
    Thank you in advance for clarification.
    Regards,
    Chris

    January 14, 2019 at 9:03 pm #1053841
    kwlodar

    @Rikard, @Victoria, no comment? :(

    January 15, 2019 at 2:08 am #1053910
    Ismael

    Hi,

    The p or paragraph element is actually set to be 15% bigger than the default font size.

    #top .fullsize .template-blog .post .entry-content-wrapper {
    text-align: justify;
    font-size: 1.15em;
    line-height: 1.7em;
    max-width: 800px;
    margin: 0 auto;
    overflow: visible;
}

    Best regards,
    Ismael

    January 15, 2019 at 12:24 pm #1054082
    kwlodar

    Thank you for reply @Ismael.
    Where I can find this setting? I don’t remember I’ve made it.
    Regards,
    Chris

    January 17, 2019 at 9:36 am #1054902
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file.

    Best regards,
    Vinay

    January 17, 2019 at 12:16 pm #1054951
    kwlodar

    @vinay, have you forgot abut pasting the code? ;)

    January 19, 2019 at 2:17 pm #1055856
    Vinay

    Hi,

    Sorry for the confusion I was pointing out to the code provided by Ismael in the previous ticket.

    You can also add the below code along with it to fix the single blog post image in mobile.

    @media only screen and (max-width: 767px) {
	#top .big-preview.single-big {
    padding: 0 0px 10px 0 !important;
}}

    Just to summarise

    Add my code and Ismaels code to Enfold > General Styling > Quick CSS

    You may not see the changes until the cached files are cleared in your browser.

    Please perform the below steps to clear the browser cache:

    1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
    2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
    3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.