Home › Forums › Weaver Xtreme Theme › Separate settings for desktop and mobile possible?
- This topic has 9 replies, 2 voices, and was last updated 1 year, 4 months ago by
Realbilly.
-
AuthorPosts
-
February 2, 2021 at 19:23 UTC - Views: 32 #67237
Realbilly
ParticipantHello,
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.
February 2, 2021 at 19:29 UTC - Views: 31 #67238scrambler
ModeratorThe 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.
February 2, 2021 at 19:36 UTC - Views: 32 #67239Realbilly
ParticipantThank you for your very quick answer!
The link is:
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?)
February 2, 2021 at 19:52 UTC - Views: 34 #67240scrambler
ModeratorIt 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
February 2, 2021 at 19:55 UTC - Views: 27 #67241scrambler
ModeratorAs an example, the rule below would move the search to the left on mobile
.is-mobile #header-search .search-form {right: auto;left: 10px;}
February 3, 2021 at 18:29 UTC - Views: 22 #67255Realbilly
ParticipantI 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?
February 3, 2021 at 21:50 UTC - Views: 17 #67256scrambler
ModeratorCheck if you have entered spaces or tabs before the site title text as the HTML seems to include some of them
February 6, 2021 at 15:11 UTC - Views: 13 #67285Realbilly
ParticipantThere are no spaces or anything, but the solution is ok so. Thank you!
February 6, 2021 at 17:11 UTC - Views: 12 #67286scrambler
ModeratorActually 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;}
February 7, 2021 at 19:17 UTC - Views: 5 #67294Realbilly
ParticipantThank you very much!
-
AuthorPosts
- You must be logged in to reply to this topic.