Separate settings for desktop and mobile possible?

[Realbilly]

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.

[scrambler]

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.

[Realbilly]

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?)

[scrambler]

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

[scrambler]

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;}

 

[Realbilly]

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?

[scrambler]

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

[Realbilly]

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

[scrambler]

@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;}

 

[Realbilly]

Thank you very much!

[Author]

Posts