I need to change the image 1 to image 2 in a wordpress theme on mobile size.
the image is inline in the theme, so I can't replace it with background image and use media queries to get this done.
From:
<a class="logo">
<img src="image1.jpg">
</a>
Change to:
<a class="logo">
<img src="image2.jpg">
</a>
Any way I can do this?
I prefer CSS
You can use the following -
.logo {
content:url("image2.jpg");
}
Using breakpoints (depends on what CSS processor you are using like Stylus, SASS)
#media only screen and (min-width: 600px) {
.logo{
content:url("image2.jpg");
}
}
#media only screen and (min-width: 768px) {
.logo{
content:url("image2.jpg");
}
}
Related
I am trying to make a dropdown sidebar menu.
please see the image attached
https://i.stack.imgur.com/nsvzQ.png
I need the section to be open on a desktop view and close in mobile view.
what is the best way to achieve this?
I am trying to use the code in the following link.
https://codepen.io/gregsaxton/pen/eoWGxL
<ul class="m-d expand-list">
<li data-md-content="200">
<label name="tab" for="tab1" tabindex="-1" class="tab_lab" role="tab">Product Description</label>
<input type="checkbox" checked class="tab" id="tab1" tabindex="0" />
<span class="open-close-icon">
<i class="fas fa-plus"></i>
<i class="fas fa-minus"></i>
</span>
<div class="content">
Welcome to Brackets, a modern open-source code editor that understands web design. It's a lightweight,
yet powerful, code editor that blends visual tools into the editor so you get the right amount of help
when you want it.
</div>
</li>
<li data-md-content="300">
<label name="tab" for="tab2" tabindex="-1" class="tab_lab" role="tab">Specifications</label>
<input type="checkbox" class="tab" id="tab2" tabindex="0" />
<span class="open-close-icon"><i class="fas fa-plus"></i><i class="fas fa-minus"></i></span>
<div class="content">
<em>Brackets is a different type of editor.</em>
Brackets has some unique features like Quick Edit, Live Preview and others that you may not find in other
editors. Brackets is written in JavaScript, HTML and CSS. That means that most of you using Brackets
have the skills necessary to modify and extend the editor. In fact, we use Brackets every day to build
Brackets. To learn more about how to use the key features, read on.
</div>
</li>
<li data-md-content="600">
<label name="tab" for="tab3" tabindex="-1" class="tab_lab" role="tab">Shipping & Returns</label>
<input type="checkbox" class="tab" id="tab3" tabindex="0" />
<span class="open-close-icon"><i class="fas fa-plus"></i><i class="fas fa-minus"></i></span>
<div class="content">
<h3>Projects in Brackets</h3>
<p>
In order to edit your own code using Brackets, you can just open the folder containing your files.
Brackets treats the currently open folder as a "project"; features like Code Hints, Live Preview and
Quick Edit only use files within the currently open folder.
</p>
<samp>
Once you're ready to get out of this sample project and edit your own code, you can use the dropdown
in the left sidebar to switch folders. Right now, the dropdown says "Getting Started" - that's the
folder containing the file you're looking at right now. Click on the dropdown and choose "Open Folder…"
to open your own folder.
You can also use the dropdown later to switch back to folders you've opened previously, including this
sample project.
</samp>
</div>
</li>
By using two ways you can do this
using javascript to detect device (desktop / mobile) then with a if condition u can close or open the section onload.
using css media query to detect screen size and open or close the section onload.
example : for option 2
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
#media (min-width: 1281px) {
/* CSS */
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
#media (min-width: 1025px) and (max-width: 1280px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media (min-width: 481px) and (max-width: 767px) {
/* CSS */
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
#media (min-width: 320px) and (max-width: 480px) {
/* CSS */
}
My desktop version of my website is perfect, and runs exactly how it should, however, on mobile. I've been having Issues
Issue 1
When I uploaded the files to the hosting server, the logo was enormous, and threw everything off balance
Image was throwing everything off balance i.e. Huge Navbar, menu button not aligned to the left
I then resolved this issue with the following Code in my CSS
#media only screen and (min-width: 200px) and (max-width: 670px) {
.site-branding img {
max-width:320px;
max-height:56px;
}
.main-header {height:80px;}
}
#media only screen and (min-width: 670px) and (max-width: 1023px) {
.site-branding img {
max-width:640px;
max-height:118px;
}
.main-header {height:140px;}
}
Issue 2
After implementing this, the Navbar shrunk, but so did the logo, and changing the values in my CSS did not change the logo size to an appropriate one. It just stayed the same size
Issue 2 Image
Issue 3
This change also affected my Products page, by extending the navbar length on the mobile version, extending the width of the navbar, while keeping all of the other content to it's original alignment
Issue 3 Image
Conclusion
I'd like to know how to keep the logo and the menu bar aligned on the same line, while increasing the size of the logo for the mobile version of the site.
I also do not know what is causing the issue on the products page, and I have no idea how to resolve that issue.
Thank you
Please check Below code I replace Some Html also I added a comment
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<!-- <div class="site-branding" img src="img/Logo.png" > --> <!-- This is not a right way to put HTML -->
<div class="site-branding"> <!-- I Removed img src="img/Logo.png" -->
<img src="https://logodownload.org/wp-content/uploads/2019/07/mini-logo.png" style="width:100%; height: auto;" /> <!-- Here I changed width 100%; and Height auto -->
</div>
</a>
And also add this css and You can change max-width as per your logo size
#mainNav .navbar-brand {
max-width: 120px;
}
Maybe add display:flex to common parent
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
For desk top version,(when life was simpler) normal page text gets displayed fine. but for tablet and mobile version text overflows.
I already am using
h4#lineForUrl a:first-of-type {
max-width:500px
display:inline-block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
but this gets only effected in desktop size page.
For my web users can post anything,and along with the post title gets displayed in the front page. When the title is too long I used the above code to stop overflow. but when I decrease the size of the screen, overflow prevented title is still too long for it.
How do I achieve my goal here?
<h4 id="lineForUrl">
<a href="{% url 'post' post.slug %}"
target="_blank"
style="margin-left: 15px; text-decoration:none;">
<img src="{{post.thumbnail}}"
class="img-rounded"
alt="☺"
height="75"
width="75"/>
<span id="title-font">
{{ post.title }}
</span>
</a>
Change the size of the font:
You can use media queries to set the stile for narrow screens;
#media screen and (min-width: 480px) {
#lineForUrl a {
font-size: smaller; /* or font-size:10px; */
}
}
Or even easier, just use a font size relative to window (viewport-percentage lenghts):
#lineForUrl a {
font-size: 0.5vw;
}
I have a <div> like this:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="slider.html"></iframe>
</div>
But when I decrease the screen size to small or medium, I will get white-space beneath the <div>.
Like This:
How can I have a dynamic height for this <div> to avoid the white-space?
You need using javascript to discover the dynamic height.
We have some functions in this links:
make iframe height dynamic based on content inside- JQUERY/Javascript
and call when the browser resize.
use media query like and add it to custom css
this is just a sample
#media (min-width: 992px) and (max-width: 1199px) {
.visible-md-block {
display: block !important;
}
How to fluid images when resize window?.
I have HTML code like this :
<div class="box">
<img src="http://demo.smooththemes.com/magazon/wp-content/uploads/2013/01/984632486_9d8ff89b63_b-642x336.jpg" />
</div>
And CSS :
.box {width:150px; height:60px; position:relative; overflow:hidden}
.box img{position:absolute; width:180px; height:80px; top:-10px; left:-10px}
When windows is resized, I want remove properties of (.box img): top:-10px; left:-10px and attribute more : min-width:100%, max-width:100%. It means we have :
.box img{
position:absolute;
width:180px; height:80px; min-width:100%;
top:(removed); left:(removed)}
How can I do it with Javascript or Jquery. Thanks for your help.
I tend to agree with #Phorden that media queries are a good route for this.
However, if you need to do it with JS / jQuery:
$(window).resize(function() {
$('.box img').css({'top': 'auto', 'left': 'auto', 'min-width': '100%'});
});
I don't know about a jQuery or Javascript solution, but if you want a pure CSS solution, CSS media Queries is probably what you want. It is a foundational concept of responsive web design. More info on CSS Media Queries here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
add max-width:100% and height:auto to your images to make them resize proportional based on their parent:
.box img{
position:absolute;
top:-10px;
left:-10px
max-width: 100%; /* fits width of parent */
height: auto; /* resize height based on max-width, making it proportional *?
}
.
I think this script by Scott Jehl could be interesting for you although the images only change there dimensions at specific breakpoints.
picturefill
It's very useful as you can define different picture sources for various resolutions.
The markup needed in combination with this script looks e.g. like this:
<span data-picture data-alt="Image description">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="external/imgs/small.jpg" alt="Image description">
</noscript>
</span>