Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1392493
    hdarteaga
    Participant

    Hello!

    Everything is fully updated via wordpress and theme.
    Here is the webpage: https://prostudiolive.com/blog/become-a-member/

    I created a page I love but there are some issues that arise when my page shrinks down to mobile.

    I have a catalog of courses and when it scales down I would like all the images to be on the same level horizontally. Is there a way to achieve this within your theme?

    I have attached screen shots of what I mean.

    P.S There is text between each image 🙂

    **Images leveled correctly on full screen:

    **Images leveled incorrectly when the screen begins to scale down:

    **Additionally is it possible for the image in the attachment bellow to show on top of the headline when in mobile view?

    **Here is what it looks like in fullscreen:

    The image in fullscreen is in the 2nd column to the right and I get how it would show below the text when scaling to mobile but is there anyway to code that in a way where the image still shows above the text in mobile?

    #1392971
    Lely
    Moderator

    Hi There,

    Please add the images on different ROW.
    Currently, you have 1 row, 3 columns. On each column you have 3 images.
    Let’s change that setup. Use 3 ROWS instead. Then each ROW have 3 columns. Dividing it by ROW will make it align even when we resize the screen.

    Regarding the image to show on top on mobile view, we need to use HIDDEN BASED ON SCREEN WIDTH property for ROWS. Setup two ROWS. One is hidden on mobile and the other is hidden on desktop. Then setup the same content on the other ROW with the image on top.

    Hope this helps.

    #1394593
    hdarteaga
    Participant

    Worked perfectly thank you!

    #1394897
    Christian
    Moderator

    You’re welcome.

  • <script> jQuery(function($){ $("#no-reply-1392493 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>