Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 29, 2022 at 12:24 pm #1374251
    rwitconsulting

    Hi all, I just started building my website using the Enfold Theme with the consulting demo. So far so good – there is just a layouting problem with the top easy slider and the text location on a mobile phone. (see screenshot):
    Mobile - Consutling Demo Problem (Screenshot mobile problem)

    The font size can be easily adjusted in the slider for the mobile version – so that is good.
    With the smaller font size I just would need a solution so that the whole text (box) is on the right (like it is on the desktop) and text itself is still left aligned; here the screenshot from the desktop version. So actually to have still 2 columns in the mobile version and the text (headline and caption) is in the second column on the right. Desktop screenshot:
    Consulting Desktop alignment (desktop alignment )

    Thank you so much for your solution ideas, br
    Rene Weiss

    • This topic was modified 2 years, 8 months ago by rwitconsulting. Reason: images not working - added as links
    November 29, 2022 at 2:55 pm #1374293
    Rikard

    Hi Rene,

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

    @media only screen and (max-width: 767px)  {
.responsive #top .slideshow_caption {
    width: 50%;
}
}

    Best regards,
    Rikard

    November 30, 2022 at 6:42 pm #1374501
    rwitconsulting

    Hi Rikard, thank you for the input. It didn’t work out of the box but with your input (text was still left hand side over the image), but with your input I could develop a final solution myself.

    I need to align the text (.slideshow_caption div) to the right half of the screen. Unfortunately a right: 10px (for instance) doesn’t work for the mobile version (for all others sizes it does). But what works is a hacky margin-left: 55%. And as this actually looks good in all screensizes I removed the query for the max-width and just use this now:

    @media only screen  {
.responsive #top .slideshow_caption {
    width: 50%;
    margin-left: 55%;
}
}

    I’ll do some further testing (browsers, screen sizes) but my initial tests looked good.

    Follow up question – as this is just the quick CSS – the right location would then be to put it into the style.css (I already use the enfold-child theme).

    Thanks again, was of great help,

    • This reply was modified 2 years, 8 months ago by rwitconsulting. Reason: missing some input for clarification
    December 4, 2022 at 1:08 am #1374979
    Mike

    Hi,
    Sorry for the very late reply on your follow up question on placing the css in your child theme stylesheet, yes this is a good place.
    Thank you for your patience and understanding and using Enfold.

    Best regards,
    Mike

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