I have created a resource page on my blog which contains all the required resources needed for online businesses.
I want to make sure that all the buttons should appear in one line on all devices.
If you want to check actual page, here is the link: Resource Page
This question is more a simple CSS flexbox question and not anything to do with WordPress specifically. Adding this CSS to your theme or customizer will align the buttons in the same place.
.thrv_wrapper.thrv-button {
margin-top: auto;
}
Related
I want to remove the icons shown in the wp site image below:
Here is Another Image where I wishto remove the author icon -
You can achieve this using css. Inspect the html document and identify the classes affect the author's details section. Eg.
.suspect-class{
display: none;
}
One option is to modify the archive.php. If the theme you're working from is paid, I suggest you go in the direction of building a child theme where you can basically overwrite/edit the parent theme's design etc.
can you help me understand what bootstrap is? I know people is it for styling pages but can you clarify it to me? A big company like Twitter, Facebook or YouTube can use it?
Bootstrap is a very nice set of "styles" for all elements of any webpage. With it, a developer can focus on what they want to build (i.e. the elements) and very easily apply all the styling (including a lot of the colours, positioning, layout, movement/javascript) by simply adding few lines of code at the start of the webpage and adding a bootstrap class to an element, or wrapping parts of their webpage in a <div>.
Here is an excellent example of a very basic site that is made to look professional very quickly using very simple bootstrap. Click on "full page demo", then view -> view source to see the source code.
You can see some classic bootstrap classes like
<div class="jumbotron text-center">
and
<div class="container-fluid">
Bootstrap is a free and open-source front-end framework developed with css and javascript.
For styling and other change of the html, we make CSS classes and ids. And the main work we do in the css file and js file . But in bootstrap there is already some files which have many built in classes and ids .
After adding bootstrap to a html file we can do many work by only calling those classes and ids .
like ,
<p class="text-center">Center aligned text on all viewport sizes.</p>
only calling the class "text-center" we can align text center . No need to do any other css .
Many big company like Twitter, Facebook or YouTube can use it. On the other hand some make their custom files like bootstrap.
Recently I've made a new Wordpress crew page for my team, this one. I'm using the visual composer plugin to put it all together. Unfortunately, the Wordpress theme adds a margin between the two sides that I cannot remove using visual composer. (see here)
After using inspect element in Safari I found the line that creates the margin (see here). After deleting the line it looks (like this).
My main question is: what is the best way to remove this margin? I'm afraid that jumping into the source code will mess up the website because the margin is part and connected to so many classes, maybe even on other pages?
Additional question: After deleting the margin in the inspector tool it creates white space on the right. I tried to find a specific page width or something similar but without success.
Thanks in advance!
You could create a Child Theme
Any code added to a child theme will not mess with the code of the original "Parent" theme. You can add your own stylesheet in it and override any styles you please, and they will carry over after any updates.
Use a plugin like Simple Custom CSS to inject your styles into the site.
You have to overwrite whole column grid. Try pasting this CSS code on "Custom CSS" field of your template or use plugin like "Cusom CSS"
.vc_col-xs-12, .vc_col-sm-6 {margin-left:0px!important;}
#media (min-width: 768px) {
body .vc_row-fluid .vc_col-sm-6 {width: 50%!important;}
}
If you know CSS, you should add ID to front page container and apply above CSS only to the front page. Otherwise it will take effect on whole website. It will remove margin between 1/2 columns.
Other way:
Try to make same arrangement of elements by using full width table instead of responsive columns - it will affect how website will look on mobile devices - but do you like how it looks now on mobile? ;)
I want to change the way Tumblr default theme shows the pages links (just under the Title and Description.
Some time ago it just showed all the links and if they didn't fit on one line, they just went to the next line.
Currently there is only one line of links that needs to be scrolled horizontaly using click n drag (or sliding with the finger in smartphones).
I want to change it as before so all the links can be shown without needing to scroll.
I am having to guess here as you have not provided any code or an example, but if you want to show post tags stacked on top of one another (like a list).
Then change this code:
.inline-meta .meta-item {
display:inline-block;
...
}
to this:
.inline-meta .meta-item {
display:block;
...
}
Or write your own style tags as this css is inherited I believe.
So at the bottom of your style tag just add the property display:block to the .inline-meta .meta-item element.
I am working with the Google Engine for a class, and I had a question about css tabbed menus. I found a tutorial for tabbed menus, here is the link to that one if it matters:
http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html
I was wondering if anyone knew of a way to make it so that it didn't have to reload the page every time I click a link in the menu. Basically have it already have the info in memory and change just the text, or only refresh a specific part of the page. I have no idea what types of stuff you might need, but I basically copied that code exactly, and used the app engine and template inheritance to get the different page info. Let me know if you need other info. Thanks in advance.
WWaldo
I can suggest at least two possibilities using JavaScript; you could either target the links in your CSS menu items towards:
Altering the content (e.g., the value of the src attribute) of a main iframe element (for example), or revealing/replacing preloaded content into/out of div element(s); and/or,
Trigger an AJAX call to a server to determine an update, and update the contents of the required components (e.g., div) dynamically.
The difference is pre-loading all the page content first (1) as opposed to accessing it dynamically on command (2). If you don't have control over a server to implement AJAX in suggestion (2), then (1) will suffice, but at the cost of offloading the work (and downloads) to the client.
Both approaches will require dynamic update of page contents using JavaScript. The 'net is littered with examples of this; check out this one, for instance.
It is actually quite easy to make a tabbed menu in HTML, with CSS, javascript is not needed for my design. I did this example in about 1/2 an hour.
Here are some screenshots of my example. (I Censored My Name Out Of The URL, And I Cropped Them)
All you do is make 3 boxes, With links to other webpages in them. It can look the same in all the pages. It is recommended to make rounded corners.
<div id="Tab1">Tab Numbah One </div><div id="Tab2">Tab Numbah Two </div><div id="Tab3">Tab Numbah Three </div>
Go into your external CSS sheet, make them all float left, and on the same line, make it look pretty, and you NEED a border of some sort.
Then make an overriding style in each of your pages. Make the bottom border non-existent, so it looks like the tabs of a binder. I changed the color, so when you were on that page, it looked a bit better. Note, I indent my CSS very unusually.
Page 1
#Tab1 {
border-bottom:none;
background-color:white;
}
Page 2
#Tab2 {
border-bottom:none;
background-color:white;
}
Page 3
#Tab1 {
border-bottom:none;
background-color:white;
}