I'm encountering a problem with responsiveness at my site https://zaplata.sk
When I try to access a webpage from browser on my smartphone, the website is full responsive. But when I try to open it from link from messenger, it's showing something like PC version wrapped into size of mobile phone.
here i'm posting screenshots from both cases.
Accessed from smartphone browser
Accesed from redirect link from messenger
I figured it out. I have added some icons in classic webpage for PC resolutions in menu.
But, i haven't it hiden in responsive state, so i created class in CSS
#media screen and (max-width: 900px) {
.site_logos {display: none;}
}
and applied it via div
<div class="site_logos">
<p align="right">
<img style="margin : 1.5px 20px" src="https://zaplata.sk/wp-content/uploads/2018/09/fb_logo.png" width="33px"/>
<img style="margin : 1.5px 100px 0px 0px" src="https://zaplata.sk/wp-content/uploads/2018/09/instagram.png" width="33px"/>
</p></div>
and everything seems to work now :)
Related
I've added an image to the home page of my website, and it all looks good on my big screen, however, when I go to view the website from a smaller laptop, it doesn't show the image. Any tips on how to make the website more responsive, so that this image appears on all devices? (or just on the web, not too bothered about mobile)
This is the code I've used to add the image:
<h2 class="main-heading no-margin"/>
<section class="home-welcome text-center padding show-for-medium" style="padding-left: 0 !important; padding-right: 0 !important; padding-top: 0!important;">
<img src="https://i.ibb.co/KyhxHP0/Screenshot-2022-05-10-at-12-04-57.jpg" style="width: 100%;"/>
</section>
This is what I'd like the website to look like (and it does on my big mac screen):
This is what it currently looks like on a smaller screen:
Everything looks great on desktop. But in the mobile view I'm seeing blog titles overlapping the blog teasers on my blog page. I am trying to add margins to the bottom of the blog post titles for the mobile view only:
I've tried adding this css:
#media all and (max-width: 1000px) and (min-width: 700px) { .entry-container .entry-title { margin-bottom:15px; }}
but that doesn't seem to do anything.
Here is a copy of the div with its classes:
<div class="entry-container"><header class="entry-header"><h2 class="entry-title"><a class="entry-title-link" rel="bookmark" href="https://avt.850.myftpupload.com/why-we-became-financial-advisors/">Why We Became Financial Advisors</a></h2>
</header><div class="entry-content"><p>Would you hand over your house keys to a stranger? That’s often what it feels like to work with a financial advisor. Not only do …</p><p class="more-link-wrap">Continue Reading <span class="screen-reader-text">about Why We Became Financial Advisors</span></p></div><footer class="entry-footer"><div class="alignleft"><img alt="" src="https://secure.gravatar.com/avatar/895fdbf242e920205673491b0b5b2b80?s=46&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/895fdbf242e920205673491b0b5b2b80?s=92&d=mm&r=g 2x" class="avatar avatar-46 photo" height="46" width="46" loading="lazy"></div><p class="entry-meta"><span class="entry-author">Written by:<br><span class="entry-author-name">Kourtney Kearney</span></span><span class="entry-date"><time class="entry-time">Published on:<br><span class="entry-time-date">September 2, 2021</span></time></span> <span class="entry-comments-link">Thoughts:<br>No comments yet</span></p></footer></div>
Just review the provided Test link, the issue is not related to Title or Responsive.
Actually margin-top: -60px!important; CSS added on .entry-content and margin-bottom: 65px; CSS on .entry-header.
Step 1:
Remove margin-top: -60px!important; CSS from .entry-content.
Step 2:
Change margin-bottom: 65px; CSS to margin-bottom: 0; on .entry-header.
Will resolve your issue on Both Desktop and Responsive versions. Thank You
There are couple of things you can check:
min-width: 700px to max-width: 1000px is not mobile view. It is usually tablet size. So if you're checking on smaller screen sizes, your CSS might not get applied.
As you can see in the snippet you pasted, normal divs will be positioned correctly one after the other without an overlap even when there is no margin set. So check if you've have a height set on .entry-container, .entry-header, .entry-title h2.entry-title. This is probably causing the header to overflow and thus overlap on the content below.
I have a website that works fine normally but when in mobile mode, all the links (with exception of the navigation) are no longer clickable. Does anybody know how to change this? I'm not too familiar with Bootstrap though I've tried to troubleshoot as much as I can.
Here's the website: http://dominiquehall.com/dom/
Thank you in advance if anybody can help.
Remove the following code from your theme css file (agency.min.css) at line 477:
div {
height: 100%;
}
Or you can override that property by adding the following code in your custom css file:
div{
height: auto !important;
}
The problem in your code is with the property of div having height 100%, thus overlaying all the links. The div containing the image of a person playing guitar is covering the links in mobile mode. The images are hidden but the div still exist.
Another hack is hiding that particular div in mobile mode.
#media screen and (max-width:991px)
{
.target_div{
display: none:
}
}
In your case the target div is:
<div class="col-lg-4 col-md-5">
<div class="fixed">
<img src="./img/dom1.jpg" id="photo" class="hidden-sm hidden-xs" alt="">
View Resume
Equipment List
</div>
</div>
Just add a class name to the above div and a display as none for mobile devices and your site is good to go.
I have the following HTML :
<div class="form-group" style="margin-left: 7%;" id="gCaptcha">
#Html.Recaptcha("MyKey", CaptchaTheme.Dark)
#Html.ValidationMessage("ReCaptcha")
</div>
As you can see I have specified margin-left:7% reason behind this is because I want it to appear in the middle instead of floating to the left as shown here:
this works fine on desktop / tablets but when viewed on a mobile device its pushed further to the right because of the margin-left:7% i have specified, now to fix this I assumed I could of put margin-left:auto; margin-right:auto but that doesn't do anything, can anyone suggest a way that will make this captcha appear in the middle for all devices?
Hello there try this in your #media for phones:
Important inline-styles will overwrite any other css
remove style="margin-left: 7%;"
#gCaptcha{
margin: 0 auto;
width: 85%;
}
If this doesn't work please provide the CSS for .form-group
I currently have a page that generates a table from an SQL database using PHP, including one column that contains images. Due to us now having to work on a mobile platform, I'm looking for a way to hide the images. I'm currently using display: none on an antiscreen.css file, but as the images are links, it doesn't show the links
For clarity, when the image is on a PC browser it appears like this:
<td>
<a href="link to image source:>
<img height=80 alt='Text I want to display' src="link to image source" />
</a>
</td>
And when on a mobile the image, link and text are hidden using the display:none method.
So how would you recommend I work this out?
I would probably do this:
<td>
<a href="link to image source:>
<img height=80 alt='Text I want to display' src="link to image source" />
<span class="mobileonly" src="link to image source">Text I want to display</span>
</a>
</td>
Then I would set span.mobileonly { display: none; } on the main stylesheet and span.mobileonly { display: inline; } in antiscreen.css. The advantage is that the mobile link will also be easy to style.
Another option, which works for all screen sizes under a certain nr. of pixels is to use a media query, basically similar to the above one but with the advantage that it works on any screen size smaller than the defined number of pixels.
/* Media Query for mobile */
#media screen and (max-width: 480px) {
/* This resizes tables and images to be 100% wide with a proportionate width */
/* Hide stuff on mobiles */
table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}
/* Additional Media Query for tablets */
#media screen and (min-width: 480px) and (max-width: 1024px) {
/* Hide stuff on tablets */
table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}
This should covers both mobile and tablet devices.
Code courtesy of .net email tutorial. I only stripped the parts you don't need.
Usage:
<img class="emailnomob" height=80 alt="Text I want to display" src="link to image source" />