Home Forums Weaver Xtreme Theme Separate settings for desktop and mobile possible?

Topic Resolution: Resolved
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #67237
    Realbilly
    Participant

    Hello,

    is there a possibility for a seperate adjusting of the presentation for desktop and mobile phone?

    Especially site title, tagline and that search button. I wish I could definite the positions separate for desktop and mobile phone.

    Thank you.

    #67238
    scrambler
    Moderator

    The theme is responsive and therefore adapts the layout automatically when going from Desktop to Tablet to phones.

    It also has options like Hide on specific devices for pretty much every piece of content.

    It also has shortcode to display created content on specific devices.

    In addition to these built in options and tools, you can customize pretty much anything in anyway you want with the use of Custom CSS.

    So you need to be very specific about what you are trying to customize and how. And  you need to provide a link to your site, for us to give you specific ways to accomplish what you want.

    #67239
    Realbilly
    Participant

    Thank you for your very quick answer!

    The link is:

    Startseite

    and we want somewhat like site title and tagline left-justified (but not at the left margin, just the same x-position) on desktop and right-justified on mobile (here at the right margin).

    (And not important, just btw: Can I move the search-field, too?)

    #67240
    scrambler
    Moderator

    It appears Woocomerce is messing the theme styling.
    Add the rules below to the theme Global Custom CSS Rule box, that will approximate what you want, then we can fine tune.

    .is-desktop h1#site-title, .is-desktop #site-tagline {text-align:left;margin-left:5% !important;}
    .is-mobile h1#site-title, .is-mobile #site-tagline {text-align:right;margin-left:0% !important;}

    That makes the search collide on mobile, so you need to decide where you want it to avoid that

    #67241
    scrambler
    Moderator

    As an example, the rule below would move the search to the left on mobile

    .is-mobile #header-search .search-form {right: auto;left: 10px;}

     

    #67255
    Realbilly
    Participant

    I tried that out and it is very good to adjust! Thank you!

    But one question: Why does it look like the tagline is further to the left than the title? But I think it is an illusion because of these letters, right?

    #67256
    scrambler
    Moderator

    Check if you have entered spaces or tabs before the site title text as the HTML seems to include some of them

    #67285
    Realbilly
    Participant

    There are no spaces or anything, but the solution is ok so. Thank you!

    #67286
    scrambler
    Moderator

    @realbilly

    Actually there is a left padding on the site title too.

    Add the rule below top remove it

    #site-title a.site-title a  {padding-left:0;}

     

    #67294
    Realbilly
    Participant

    Thank you very much!

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