I need some help making a responsive button that includes both text and a custom image. It also needs to link to an external URL and I am trying to match it to an existing built-in button on the site.
I am using Wordpress, the theme is Vantage and the button that I am trying to match is a SiteOrigin button widget. The site is still under development but can be found here
The button is in the Contact section at the bottom of the Home page and is the one with the words "Link to" and the image of the Broadmeadow Medical Centre on it. At the moment the button is just an image and it isn't responsive.
Try this
.siteorigin-widget-tinymce.textwidget p{
text-align:center;
}
#media (max-width: 780px){
#panel-15-4-0-2> .panel-widget-style{
width:100%;
padding:0% !important;
}
.siteorigin-widget-tinymce.textwidget p a>img {
width: 90%;
}
}
Related
On my website enter link description here
Home page last row of latest ads showing on home page is not coming in line can anyone one help me with css or any other way to fix this problem.
It's due to you not having the salary on each advertisement.
If you add <h4 class="colorfull">1.00 Dirham د.إ</h4>from 'Primavera P6' onto the next one 'Required female real estate agent' you'll notice the layout rearranges itself.
You have to ensure standardization between advertisement images/structure, or by defining strict sizes within the CSS.
The heights of the ads don't correspond. Add the below code to give them all the same height. And i noticed the images weren't centered.
.caption {
min-height: 130px;
}
/**Add the below to center image **/
.thumbnaile > .lefter {
text-align: center;
}
I want to have a page which shows up in my index page but not clickable (so as an image block). can i achieve this by css or page header code injection? Does anyone know? Please help!
First, you'll need to find the id of the div you'd like to edit.
Using the squarespace flatiron demo as an example, the div is "yui_3_17_2_1_1405046742289_1089"
a#yui_3_17_2_1_1405046742289_1089 {
/*disable the link */ pointer-events:none;
}
If you want to hide the text over the image as well:
#yui_3_17_2_1_1405046742289_1089 .wrapper {display: none;}
}
I am new to all these styling things. I entered a sort of instruction note to not-at-all techy person for his blog in the post editor as how he can upload a media. I gave that the following lines.
HTML
<span class="uploadmedia">Click Upload Media and Add your image</span>
CSS
.uploadmedia {
display:none;
}
Now, I know with this class, both the text and the image within it will be hidden. The person is supposed to click anywhere in this line Click Upload Media and Add your image & enter an image. But only the image should show up since that line is just acting as a instruction to him as how and where should he click to upload an image. Please help me correct this code.
I suggest to use Nicolas Gallagher's image replacement technique. You could add the following class to your element in order to hide the text:
.ir {
font: 0/0 a;
text-shadow: none;
color: transparent;
}
WORKING FIDDLE
I'm having difficulties getting an embedded YouTube video to not show on my site. The thing is there are two of the same embedded videos on the page and I would like to hide one.
There are 2 because one is generated by the wordpress theme (I have to paste the embed code somewhere in the theme settings) while the other is the direct youtube link pasted into the editor, the sole purpose being to auto generate featured image from the video thumbnail.
I would like to hide the second one, preferrably. I know it can easily be deleted by deleting the YouTUbe link in the text editor after publishing. But I want it to not to have to show at all at the time the page is initially published.
In attempt to hide any of the 2 videos, I have tried this CSS and it doesn't seem to work
div.entry-video-wrapper {display:none !important;}
div.entry-video iframe {display:none !important;}
div.fluid-with-video-wrapper {visibility:hidden !important;}
Is there anything I might be doing wrong?
Here's the sample page I'm working on http://wazobiajournal.tv/gallery/game-of-thrones-season-4-fire-and-ice-foreshadowing/
If you want to hide first video then use:
.entry-video .fluid-width-video-wrapper{
display: none;
}
If you want to hide second video then use:
.embed-youtube .fluid-width-video-wrapper{
display: none;
}
Although your code is also working and it seems that you have to clear cache to see it in action.
Note: Avoid using !important, it is not a good practice.
Try to clean cache maybe. I'm just trying to add display: none; for .entry-video-wrapper in CSS and it's work for me:
.entry-video-wrapper {
margin: 0 -30px;
display: none;
}
I want to replace it with a fancy logo image. I am sure most sites do this... is it ok?
I would keep the title settings in admin, but change the theme so that the home page don't show the title, but has it in the HTML-title. You could also move the <h1>-title off screen using css.
It's actually a great SEO technique to utilize the page title as the main <h1> for the site (since it appears on the top of every page). If you don't want it to display, DO NOT use #headerimg h1 {display:none;} to hide it, instead try some tricky CSS like this:
#headerimg h1 {
position: absolute;
margin-left: -3000px;
font-size: 1px;
}