Tagged: , , ,

Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • February 4, 2021 at 12:41 am #1277487
    pinnicreative

    Hi there,
    On a website I have created: http://qxy.6a3.myftpupload.com/treatments/ I have used right and left inner padding on full sized 1/1 columns on the Treatments page, to inset the content from going to wide (making it a better reading experience), however it creates a long very thin column on the responsive/mobile view.

    Is there some CSS I can add to override this on mobile?

    Cheers
    Kristin

    February 4, 2021 at 7:02 am #1277569
    Jordan Shannon

    Hey Kristin,
    Add this to quick css:

    @media only screen and (max-width: 767px){
.page-id-957 .flex_column{
padding:0px!important;
}}

    Best regards,
    Jordan Shannon

    February 5, 2021 at 11:10 pm #1278186
    pinnicreative

    Hi Jordan,

    Thanks, yes this worked for the ‘Treatments’ page, it looks great. Do you know why in the ‘Special Heading’ the word ‘Medispa’ would be getting cut off at the top? I do have minus padding on the divider line above on the website and this line is not showing on this page or the ‘Skin Insights’ page … presuming this has something to do with it…? (same thing with ‘Skin Insights’ page.

    I also tried to apply the same code suppliedabove for the ‘Skin Insights’ page (for the ‘Special Heading’, posts appear fine). It didn’t work, I did use the page ID that was showing – 945.

    Cheers
    Kristin

    February 6, 2021 at 8:20 pm #1278346
    Victoria

    Hi Kristin,

    https://share.getcloudapp.com/L1uN7nd9 Do you need to remove this space too?

    Best regards,
    Victoria

    February 14, 2021 at 5:08 am #1280370
    pinnicreative

    Hi Victoria,

    Thanks for your reply. I am probably not too concerned about this space. More so the words being chopped off at the to top of the Special Heading and the special heading aligning with the copy underneath (same on Skin Insights page).

    Cheers, Kristin

    February 16, 2021 at 10:23 am #1280761
    Victoria

    Hi Kristin,

    Could you please attach some screenshots of the issue?

    https://share.getcloudapp.com/nOuloQ0X I would make this show in one column for the smallest screen sizes. What do you think?

    Best regards,
    Victoria

    February 18, 2021 at 5:26 am #1281938
    pinnicreative

    Hi Victoria,

    I was referencing the headings on this page and the treatments page. Can you let me know how/where I can upload a screenshot and I will share with you?

    Cheers
    Kristin

    February 19, 2021 at 6:38 am #1282128
    Jordan Shannon

    Hi,

    You can use the following service:

    https://snipboard.io/

    Best regards,
    Jordan Shannon

    February 25, 2021 at 12:58 am #1283534
    pinnicreative

    Thanks Jordan,

    Here are the links to the 2 x images showing the cut off heading and extra spacing on left hand side. If better practice, I am happy to create these using a different method (rather than padding on special heading), if you can let me know what would be the best way for responsive viewing.

    https://snipboard.io/H4Q1N2.jpg
    https://snipboard.io/GtvRiO.jpg

    Cheers, Kristin

    February 28, 2021 at 5:02 pm #1284267
    Victoria

    Hi Kristin,

    Did you remove the code? I am not seeing the same as you have on the screenshots.

    Best regards,
    Victoria

    March 2, 2021 at 11:39 am #1284669
    pinnicreative

    Hi Victoria,

    I haven’t changed anything. When viewing on my iphone it looks like the screenshots I sent you with the words chopped off at the top and the whole of special heading inset (not in line with text below). If I preview online on my mac desktop and choose ‘mobile’ from the dropdown list it doesn’t show the words chopped off, however the heading it still inset. I don’t believe previewing it on ‘mobile’ setting in wordpress really gives the same view as looking on an actual mobile.

    Cheers, Kristin

    March 2, 2021 at 4:49 pm #1284810
    Victoria

    Hi Kristin,

    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.avia-safari main.template-page.content.av-content-full.alpha.units {
    padding-top: 100px;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 3, 2021 at 2:56 am #1284919
    pinnicreative

    Hi Victoria,
    This hasn’t seemed to make any changes. I have previewed on a desktop and also on a iphone and it is still as before. If it is not possible to have the special heading align properly on the responsive site I guess I will have to look at changing them all to another style … or try to make it work without using padding/negative padding to line it up. It just looks fine on the desktop version.
    Cheers Kristin

    March 3, 2021 at 8:31 pm #1285132
    Victoria

    Hi pinnicreative,

    Please share credentials with us in private.

    Best regards,
    Victoria

    March 4, 2021 at 9:41 pm #1285541
    pinnicreative

    Hi Victoria,

    Login in private below. The words in the ‘special heading’ are no longer cut off at the top, however the padding at the left side is still not overridden. If there happens to be a better way to create the indent on the desktop version (rather than padding) that would reflect correctly on the mobile version I’d be happy to change it.
    Cheers, Kristin

    March 8, 2021 at 3:52 pm #1286467
    Victoria

    Hi pinnicreative,

    Credentials did not work for me. Could you please update the credentials?

    Best regards,
    Victoria

    March 9, 2021 at 4:47 am #1286616
    pinnicreative

    Ok, please see below.

    March 12, 2021 at 10:47 am #1287630
    Rikard

    Hi,

    Sorry for the late reply. I’ve added this to your Quick CSS box, and it’s applying on your site now:

    @media only screen and (max-width: 767px) {
div.av-special-heading {
    margin-left: 0 !important;
}
.av-subheading_above p {
    line-height: 16px;
}
}

    Please check on your actual device, to see if it looks better. Make sure that you load the page in an incognito or private browser window, on your actual device.

    Best regards,
    Rikard

    March 15, 2021 at 4:44 am #1288150
    pinnicreative

    Thanks Rikard,
    This is much better. The only tiny thing it seems to have done is make the special heading on the ‘Medispa Treatments’ page sit right on top of the description below. The ‘Skin Insights’ is perfect – there is a space under the heading before the description. Do you mind checking? I didn’t want to mess with any of the codes you have just added.
    Cheers, Kristin

    March 18, 2021 at 4:19 am #1288866
    Rikard

    Hi Kristin,

    Thanks for the update. I can’t see that on my end, or I might be misunderstanding you. Could you post another screenshot for clarification please?

    Best regards,
    Rikard

    March 21, 2021 at 11:54 am #1289430
    pinnicreative

    Hi Rikard,
    Sure, below are the links to what I see on a mobile phone. Notice the heading spacing for ‘Medispa Treatments’ is condensed in comparison to ‘Skin Insights’ – which the spacing is correct. These headings + text below are the same in terms of how they have been made/placed etc, so should look the same.

    Medispa Treatments: https://snipboard.io/XUgGmQ.jpg
    Skin Insights: https://snipboard.io/wKsGcT.jpg

    Cheers Kristin

    March 24, 2021 at 6:45 am #1290038
    Rikard

    Hi,

    Thanks for the update, and for the screenshots. I see the same spacing on desktop as well, could you try to add some bottom padding to the Treatments header, in the Styling tab in the element options?

    If you need custom CSS, then you can try something like this in Quick CSS:

    .page-id-957 div.av-special-heading-h3 {
  padding-bottom: 15px;
}

    Best regards,
    Rikard

    March 25, 2021 at 2:17 am #1290251
    pinnicreative

    Hi Rikard,
    Sorry I didn’t notice it was showing on the desktop view. I have fixed it, so now the site is fine. Thanks for all your help, this ticket can be closed.
    Cheers
    Kristin

    March 27, 2021 at 1:38 am #1290650
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 24 posts - 1 through 24 (of 24 total)
  • The topic ‘Override column padding on mobile view’ is closed to new replies.