Support » Theme: Sydney » Custom CSS specific to Mobile and Tablet version

  • Hello,

    I’m doing my portfolio website. I personalized my header with the custom CSS tools Sydney has (it has a looping video with text on it), here is the code:

    .slide-inner {
    	top: 70%;
    	padding-left: 100px !important;
    	text-align: left;
    }
    
    h2.maintitle {
    	font-size: 100px !important;
    }
    
    .subtitle {
    	font-size: 46px !important;
    }
    
    .text-slider .maintitle:after,
    .panel-grid-cell .widget-title:after{
      display: none;
    }  
    
    .text-slider .maintitle {
    	font-family: gotham;
    }

    It looks just fine when displaying on Computer mode, but whenever I try to display it on Tablet or Mobile mode to make it responsive it looks messed up (text is too big and displaced) and I didn’t manage to find any help anywhere. So my question is: is there some kind of code that only applies to the Tablet and Mobile modes?

    Here’s a link with screenshots of the different setups I described here. (I can’t share any link to my website as I didn’t upload it online yet).

    https://www.dropbox.com/sh/u8e5sicg2m9ff22/AABl5NX_eLyVI5DVRWPd2PGSa?dl=0

    Thank you in advance 🙂

    • This topic was modified 1 month, 3 weeks ago by paul1501. Reason: Typo
Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi,

    To apply CSS code only on certain screen size or devie, you can use CSS media query.

    Here is the tutorial that explains the basics about this.

    I hope this reply helps.

    Regards,
    Kharis

    Thread Starter paul1501

    (@paul1501)

    Hi @kharisblank ,

    Thank you for your answer! It kind of does the trick!
    The thing is I wanted to preview it via the Elementor menu to make sure none of the elements moved (sometimes the website displays differently on the Customize menu and on Elementor). So I managed to scale the fonts but unfortunately, they are still misplaced when I preview my website on Elementor.

    I took screenshots just so you can see what I mean:
    https://www.dropbox.com/sh/z6nm5jwccazqomp/AADCnwFXSE5KwqSwGrcFCjMna?dl=0

    So between the Elementor and the Customize menu displays, which one should I “pay attention to”? I imagine that the website will be displayed one way or the other whenever I put it online. ( I hope it is clear)

    Thanks in advance!

    Regards,
    Paul

    Hi Paul,

    Since your issue only presents on Elementor page editing mode, I think you should reach out the Elementor support team from this link to get the exact answer. And I don’t think it is a theme-specific issue.

    Regards,
    Kharis

    Thread Starter paul1501

    (@paul1501)

    Ok, thanks for the tip!

    Regards,
    Paul

    You’re welcome Paul!

    Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

    Regards,
    Kharis

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.