Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 24, 2015 at 4:35 pm #464193
    Pete

    Hi Guys

    I have a 3 quarters 1 quarter grid row with the main content (Heading & Text Block) in the 3 quarters cell and an image in the quarter cell.

    The text from the text block overlaps into the image cell. I am using Google Chrome.

    When I refresh the browser it aligns itself correct and then when I refresh again it overlaps again.

    Its hit and miss. I have added a screenshot so you can see what I mean

    http://www.weddinghairandmakeupsuffolk.com/wp-content/uploads/grid-row-problem.jpg

    Any ideas on how I can sort this?

    I would appreciate your help in resolving this

    Kindest regards

    Pete

    The Offending page is here

    http://www.weddinghairandmakeupsuffolk.com/

    June 25, 2015 at 9:32 am #464466
    Ismael

    Hi Peter!

    Thank you for using Enfold.

    I checked the site on Chrome Windows 8 but I can’t reproduce the issue. I refreshed the page a few times but no dice. Anyway, please try to add this to the Quick CSS field to keep the paragraphs from overlapping the text block container:

    .avia_textblock p {
  max-width: 100%;
}

    Best regards,
    Ismael

    June 25, 2015 at 9:52 am #464490
    Pete

    Hi Ismael

    I will keep an eye on it.

    It does not seem to happen if you navigate naturally from one page and then back to the home page.

    It’s only when you keep refreshing that page, something that would not really happen in general use.

    The snippet of code did not make any difference so I have no idea why it happens.

    Its not a major problem just something that irritated me.

    Thanks for getting back to me

    Kindest regards

    Peter

    June 26, 2015 at 9:04 am #464796
    Ismael

    Hey!

    Alright. Let us know if the issue persists.

    Best regards,
    Ismael

    March 2, 2016 at 2:26 am #591841
    belyeaem

    Hi Ismael,

    I’m running into a similar issue. I have a 1/4 – 1/2 – 1/4 row set up inside of a color section. My content is in the middle in the 1/2 section. It appears fine on the desktop, but when you minimize it to say, an iphone6, you can see that the padding on the right doesn’t seem to be kicking in. In the column settings, I have set the inner padding on all four sides to 40px.

    Here’s the page: http://factory45.co/subscribe
    Here is an image of my inspect tool looking at the page as an iphone6:
    http://imgur.com/UcZEj1FEmily

    Note the lack of padding on the right side of the content. What are your thoughts?

    Emily

    March 4, 2016 at 5:42 pm #593407
    Vinay

    Hey!

    We are working on your ticket please wait while we update the results here soon.

    Please enable custom class http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
    add a custom-class name to the element or text widget which has the text that is touching the edge.

    Add the below css in Enfold > General styling > Quick CSS

    /*break words*/ 
@media only screen and (max-width: 767px) {
	.custom-class h2 {
	    word-break: break-all!important;
	}
}

    Another solution is to use a </br> tag before the words that touch the edge. this will break the line and there will be enough space and it is more readable.

    Regards,
    Vinay Kashyap

    • This reply was modified 8 years, 8 months ago by Vinay.
    March 4, 2016 at 10:04 pm #593545
    belyeaem

    Hi Vinay! Thanks for your response. Is a word break the only solution here? I was really hoping I could set a media query to create extra padding for smaller screen sizes OR use the query to make the font size smaller. I really like the layout of the words and I don’t want to break them up. I just want them to look centered with an even amount of padding around them. Any additional thoughts?

    Emily

    March 8, 2016 at 10:35 pm #595212
    Andy

    Hi!

    use this code in Quick CSS field:

    @media only screen and (max-width: 767px) {
.post-entry.post-entry-type-page.post-entry-4053 {
margin-right: -20px;
left: -10px;
position: relative;
}}

    and adjust as needed.

    Best regards,
    Andy

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