[CSS Help] Help centering text on mobile

Hello, I need a text on my website header to be centered evenly on mobile view, could you help with some css ?

  • Nithin
    • Support Wizard

    Hi Farzan Ahmed,

    Please give the following CSS a try, and see how it goes:

    @media screen and (max-width: 480px) {
    
    	#text-4 {
    	    margin-top: 1% !important;
    	}
    }
    
    @media (min-width: 768px) and (max-width: 1024px) {
    
    	#text-4 {
    		margin-top: 4% !important;
    	}
    
    }

    You can add the CSS via the default WordPress customizer, under Appearance > Customize > Additional CSS.

    Regards,
    Nithin

  • Farzan Ahmed
    • The Crimson Coder

    Hi

    I'm just looking at this site as well, the mobile view pushes the logo down and it's overlaping the page title (checking About Us page)

    Is it possible to to create a padding or something that won't do that and make that logo spread across the page so its not a different background colour too?

    Thanks
    Farzan

  • Kris
    • Support

    Hi Farzan Ahmed

    Thank for access to site :slight_smile:

    I made some review in your custom css section. There was a little bit mess. I delete all css which was related to this membership button. It was design incorrect.

    Below as attachment you will find file which have old css which you have in custom css section before.

    Right now I made new order in your section and provide css for membership button for all devices which is:

    /*button membership*/
    #custom_html-3 {position: absolute; right: 120px; top:0px;  height:100px;  padding:10px 0 0 0 !important; z-index:100;}
    #custom_html-3 a {height:80px; line-height:80px!important; padding:0 15px; background:#F8CA3B; float:left; color:#f00; border-radius: 20px; text-decoration:none;}
    
    @media all and (min-width:320px) and (max-width: 980px) {
    #custom_html-3 {position: absolute; right: 0 !important; width:100%; top:0px; padding:0 !important;}
    #custom_html-3 a {padding:0; text-align:center; width:100%; background:#F8CA3B; border-radius: 0 !important;}
    }
    
    @media all and (min-width:320px) and (max-width: 480px) {
    #custom_html-3 a span {font-size:16px !important;}
    }

    As you can see I do not use #text-4 selector but #custom_html-3. Looks like you made some changes in widget area.

    Please double check site now and see does this looks ok :slight_smile:

    Kind Regards,
    Kris

  • Farzan Ahmed
    • The Crimson Coder

    That looks brilliant Kris :slight_smile:

    I've just got a black area on the homepage under the logo that's appeared, but I think that will go away when I make some other changes to it later.

    For some reason though, the yellow background on the CTA (We are the biggest gym....) looks odd on mobile screens though - it sort of overstretches a little - can I get rid of that too?

    Also, not sure if its possible, but can I make that whole yellow area clickable? (not just the text ideally - the entire container).

    Thanks
    Farzan

  • Farzan Ahmed
    • The Crimson Coder

    "For some reason though, the yellow background on the CTA (We are the biggest gym....) looks odd on mobile screens though - it sort of overstretches a little - can I get rid of that too?"

    Figured this out too :slight_smile: and sorted it.

    I've just a bit of a black block on the mobile view now under the logo that I need to clear/identify why it's there, and I think that's a good result :slight_smile:

    Thanks
    Farzan

  • Farzan Ahmed
    • The Crimson Coder

    Hi again
    Sorry Kris,

    I've just noticed the classes and costs page has got messed up - there's something in the css that's doing it so I was wondering if I can exclude that page or override it or something?

    The attachment is what it should look like (except the header - the header is changed to the new style that's on there now) - when I remove the css from the Customize area, it fixes it but ideally I want to keep that css too as I like how the style of the site is now.

    Thanks
    Farzan

  • Farzan Ahmed
    • The Crimson Coder

    Hi
    Just as an update on this, i've just added an element to that page that shows only on desktop view (so it says contact us rather than click to call) - that actually looks ok but the mobile view version looks wrong - it's quite large (if you show the mobile view element on desktop view as well, you should be able to see what I mean).

    Thanks
    Farzan

  • Kris
    • Support

    Hi Farzan Ahmed

    Please try this css:

    @media all and (min-width:320px) and (max-width: 768px) {
    .page-id-676 .avia-promocontent p span {font-size:18px !important; }
    .page-id-676  a.avia-button span {font-size:18px !important; }
    }

    Note this css will also affect buttons in price boxes. This builder which you use there does not allow to add custom css class or ID to inside columns, so we cannot point directly this one section.

    Kind Regards,
    Kris

  • Farzan Ahmed
    • The Crimson Coder

    Hi Kris

    I need to do this again if I can, but on a different site?

    I want to get the Ofsted Logo on this site - https://bit.ly/2J1c14J

    Can I get it to some padding so its not completely touching the edge of the page, and also a border to get rid of the white streaks on the curved edges - I'm thinking if I have a purple border, it'll cover the edges? (unless the issue is with the picture itself obviously?)

    Finally, I want to get it on the same level as the logo as opposed to the logo dropping down a notch as it has done.

    The site is showing as under maintainence, but I've granted support access so you can see.

    Thanks
    Farzan :slight_smile:

  • Farzan Ahmed
    • The Crimson Coder

    Morning Kris

    I've re-enabled support access if you want to try now.

    Also, added a screenshot, but basically I want the NBA logo to be raised so its parallel to the Ofsted logo, and some padding on the right of the Ofsted logo and a purple edge to cover that tiny bit of white on it.

    If we can make it look good on mobile view as well, that will be awesome :slight_smile:
    Thanks
    Farzann

  • Kris
    • Support

    Hi Farzan Ahmed

    Thank you for support access. I made some css for you which you could use to fix those mobile and desktop views:

    /*desktop view - left logo goes up*/
    @media all and (min-width:768px) {
    #header_main .av-logo-container div {margin:-150px 0 0 0;}
    #custom_html-2 {margin:0 5% 0 0;}
    }
    
    /*mobile view - left logo goes up*/
    @media all and (min-width:320px) and (max-width: 768px) {
    #header_main {background:#292659; height:250px;}
    #header_main .av-logo-container div {margin:-140px 0 0 0  !important;}
    #custom_html-2 {margin:0 5% 0 0;}
    }
    
    /*mobile view2 - left logo goes up*/
    @media all and (min-width:320px) and (max-width: 733px) {
    #header_main .av-logo-container div .logo {position:absolute;}
    }

    As for this right image white border looks like it have thise white border included in image. I add below as attachment correct image which you can also change :slight_smile:

    Kind Regards,
    Kris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.