Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • June 28, 2021 at 5:26 pm #1307794
    Colferg

    Hello,
    Can you please provide a solution to allow certain elements of my site to be centered in mobile view. The items aligned left and right in desktop are not centering on mobile view. Items include text, buttons and images. I have created a PDF of the areas that need the custom code, where can I upload it fir you to see?

    Thank you,
    Colleen

    June 29, 2021 at 3:57 pm #1307963
    Ismael

    Hey Colferg,

    Thank you for the inquiry.

    You should edit the column containing the text blocks with right alignment and apply a unique class name or ID to it so that you can style it differently on mobile view.

    // https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

    You can use this css code to adjust the text alignment of the text block and remove the left margin of the column.

    
@media only screen and (max-width: 767px) {
    .custom-css-name {
	margin-left: 0 !important;
    }

    .custom-css-name .avia_textblock p {
	text-align: center !important;
    }
}

    Make sure to replace “custom-css-name” with the actual class name of the column.

    Best regards,
    Ismael

    July 9, 2021 at 5:20 pm #1309422
    Colferg

    Hello,

    I tried this and it didn’t work, it just changed the alignment of the font inside the column. I need the image, text and button centered on the screen in mobile view.

    I’m happy to send screen shots if you need.

    thank you,
    Colleen

    July 12, 2021 at 4:42 am #1309658
    Ismael

    Hi,

    Yes, please provide a screenshot of the mobile view layout. You can use tools like imgur or dropbox. Did you add the custom class name in the appropriate field?

    Best regards,
    Ismael

    July 12, 2021 at 7:32 pm #1309848
    Colferg

    Hello,

    Please see all documents in shared folder below. Included is original before adding custom CSS and the changes I wanted to make. Also included is screenshots of the custom css added to the general styling as well as in each element (coloured sections, columns, text block etc for images, text blocks and buttons) Screenshots after show that the custom CSS only changes the text alignment within the column to centred. I would like all content that is currently right and left aligned (text button & images) on mobile to be centered across the width of the screen, sliders and headers are fine as is.

    thank you,
    colleen

    July 13, 2021 at 2:52 pm #1309965
    Ismael

    Hi,

    Thank you for the info.

    We adjusted the css code a bit to adjust the left padding of the columns on mobile view and to center align the button. Please do not forget to remove the cache before checking the page.

    Best regards,
    Ismael

    July 13, 2021 at 5:10 pm #1309993
    Colferg

    Hello,

    This worked for the Home page text and button only, but the image is still not centred on the Home page. The About page photo and header text has changed but not the text block or button, please see screenshots in link below.

    Thank you,
    Colleen

    July 18, 2021 at 3:50 pm #1310602
    Ismael

    Hi,

    We should also remove the inline right padding on mobile view to center align the photo. Please replace the css code with the following.

    .mobile-responsive .flex_column {
	margin-left: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

    Best regards,
    Ismael

    July 19, 2021 at 6:18 pm #1310770
    Colferg

    thank you all mobile issues resolved!

    July 19, 2021 at 6:28 pm #1310771
    Colferg

    Sorry, it looks great on iphone but not on ipad landscape. I use my ipad in meetings with clients a lot and it needs to look good here as well.

    Is there code that can apply specifically to phone but not affect ipad? it looks great on ipad without the CSS added for phone

    Please provide assistance.

    July 21, 2021 at 5:38 am #1311013
    Ismael

    Hi,

    Try to replace the max-width value in the css media query from 767px to 480px. Look for this part in the css code that we previously added.

    (max-width: 767px)

    Replace it with:

    (max-width: 480px)

    Best regards,
    Ismael

    July 21, 2021 at 7:38 pm #1311226
    Colferg

    I changed but it still does not change the text on the ipad back to original layout pre- custom CSS for the phone. any other suggestions?

    July 22, 2021 at 8:54 am #1311378
    Ismael

    Hi,

    Would you mind providing a screenshot of the issue? We do not see any phone number in the page.

    Best regards,
    Ismael

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