Can you see the image I used as the header?
From the CSS we know that in order for an image to cover the entire width of the screen it is necessary to set the style max-width: 100%.
Using the Simple Custom CSS plugin I wrote
.wp-block-image img {
max-width: 100%;
}
but it doesn’t seem to work. I'm running WordPress 6.1 with Twenty-Twentythree theme.
Is there a better solution?
I am using min-height: 100vh; property and it works good on all screen size. My footer is always at the bottom.
There is a problem when I go to Chrome dev tools and test the site responsivnes.
If I go below 326px my footer starts to go up and this is because 100vh container is not covering the whole page anymore. I tried adding height 100% to html and body and few other tricks but it doesnt help. How do I fix this?
#Igor-Vuk, Please try with below code snippet
#media (max-width: 767px){
.full-height{
height: 100vh;
}
}
Thanks!
I have an instagram plugin installed, which i have put in the footer of my blog. on a desktop version, it is perfectly fine, however, on a mobile version, the screen is smaller and all the images align under each other, instead of 6 images next to each other as on desktop.
I would like to know, how can I make them 2 rows with 3 images on a mobile? where the 3 images together of each row take in 100% of the screen from left to right? with css?
I can't give you the full style css of the instagram plugin because it has a built-in css. But I can copy certain css element from the inspect element and put !important behind it. I just don't know how to do that.
you can see it here --> http://oihanevalbuenaredondo.be
EDIT
#media screen and (max-width:720px) {
#sb_instagram .sbi_col6 {
data-cols:3!important;
}
}
this is what i have now, it fixes that i got 3 images on each row, but the images arent square, and my images are cut, not resised
You would need to use a CSS #media query to target mobile, and add the following CSS:
#media (max-width: 640px) {
#sb_instagram.sbi_col_3 #sbi_images .sbi_item,
#sb_instagram.sbi_col_4 #sbi_images .sbi_item,
#sb_instagram.sbi_col_5 #sbi_images .sbi_item,
#sb_instagram.sbi_col_6 #sbi_images .sbi_item {
width: 33.33% !important;
}
#sb_instagram .sbi_photo img {
width: 100% !important;
display: inline-block !important;
}
#sb_instagram .sbi_photo {
height: 33vw !important;
overflow: hidden;
background: none !important;
}
}
Obviously you may or may not need to end up using !important for everything. Adding the above CSS results in the following:
Obviously I've swapped out your personal photos for placeholders, but the rest is your code.
I have used bootstrap 3 carousel and the images inside it were not getting resized accordingly.
After making this chage:
.carousel-inner > .item > img {
min-width: 100%;
width: 100%;
}
As shown in:
Make bootstrap carousel responsive on height
It worked perfectly.
Would it be a bug or after making this change I will suffer some side effect?
This is not a "BUG".
Bootstrap carousel doesn't handle correctly pictures that have not the same size.
Here is a good tutorial that give a solution to the problem.
I am using fixed layouts however when I see my layout in
android tablets and phones the layout is breaking for some
reason.
Please visit http://www.iamvishal.com/pureecn/
and notice the top navigation "open account, customer support and select language"
In the desktop it looks fine however the top navigation breaks in mobile browsers.
I am suspecting its the margin them.
#main_links_list_1,#main_links_list_2,#main_links_list_3
{
margin-right: 65px;
position: relative;
}
Pretty much things are breaking because you have half of your layout "fixed" and the other half "fluid".
For example:
div.section {
margin-left: auto;
margin-right: auto;
width: 960px; /*fixed*/
position: relative;
}
#main_links_container {
float: left;
width: 80%; /*fluid*/
}
Also note that when no width is set for an element, the default is auto.
Open your site on a desktop and try resizing the browser window you will probably see the same issue that you're seeing on mobiles and tablets.
If you really want to avoid media selectors you could try changing this-
html, body, #page {
height: 100%;
}
To something like this-
html, body, #page {
width: 1200px;
margin: 0 auto;
}
Use a media query in your CSS for greater control on mobile devices-
#media screen and (max-width: 767px) {
#main_links_list_1,#main_links_list_2,#main_links_list_3
{
margin-right: 15px; // reduced amount for mobile devices and tablets
position: relative;
}
}
Ensure this is BELOW the current CSS otherwise it will get overridden
There are a lot of reasons your site could be off in mobile/tablet.
1 ==> Create a fluid layout for non-desktop
2 ==> Make sure your meta viewport is correct (include retina display and Android dpi)
3 ==> Optimixe your images for mobile
4 ==> beware of position:fixed on older iOs and Android devices. Does not work as expected.
Can you explain a little better what is breaking?
You assumed wrong. YOu need responsive layout and not fixed!
I suggest you take a look at zurb foundation v4.
Your problem may be cause in the section Professional Solutions the last link is quite long, which breaks the layouts.
Try this in your css file:
#professional_solutions_list {
max-width: 180px;
width: 100%;
}
see the following screen to get what I meant (the red line is where your menu should reach, the blue line is where it is actually):
Update
The following state is the default one, with the problem as occurred in tablets, please notice the applied rules:
And this one after adding max-width: 180px, the problem is solved:
I edit the css rules live, using FireBug
EDIT:
Upon your comment, I've checked the website again, please remove:
width: 94%;
from the div with the id: secondary_links
Although a responsive layout like zurb would be advisable - the quick fix lies in applying a
min-width: to your page-wrapper element